网页背景居中的方法有很多种的。这里介绍一些用CSS让背景图片居中的方法。

让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的:
<div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便:
<div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 50% 50%;border:1px solid #cccccc;"></div> 第三种:用center设定(第2个center可以省略)
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(../images/logo.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>

用CSS让网页背景图片居中的方法的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  3. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  4. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

  5. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  6. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  7. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  8. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  9. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

随机推荐

  1. COM, COM+ and .NET 的区别

    所有的优秀程序员都会尽自己的最大努力去使自己所写的程序具有更好的可重用性,因为它可以让你快速地写出更加健壮和可升级性的程序. 有两种使代码重用的选择: 1.白盒:最简单的一种,就是把你的程序片拷贝到另 ...

  2. 武汉北大青鸟解读2016年10大IT热门岗位

    武汉北大青鸟解读2016年10大IT热门岗位 2016年1月5日 13:37 北大青鸟 这是IT从业者的辉煌时代,IT行业的失业率正处在历史的低点,而且有的岗位——例如网络和安全工程师以及软件开发人员 ...

  3. js快速打印一个五分制(五颗星)的评分情况

    1.函数 下面这个函数实现了在html页面中快速打印一个五分制(五颗星)的评分情况: function getRating(rating) { if(rating > 5 || rating & ...

  4. poj 水题系列

    题目:http://poj.org/problem?id=3006 筛选法求素数 #include <iostream> #include<cstdio> #include&l ...

  5. Switch基本知识

    关于java中switch使用的一些说明 switch(表达式){case 常量表达式1:语句1;....case 常量表达式2:语句2;default:语句;}default就是如果没有符合的cas ...

  6. entity framework 查询

    1.简单查询: SQL: SELECT * FROM [Clients] WHERE Type=1 AND Deleted=0 ORDER BY ID EF: //Func形式 var clients ...

  7. geetoo编译安装

    关于Gentoo发行版的介绍请看:全球最受欢迎的十大Linux发行版(图) Host机环境:Win2008 + VMware 7.1 下载安装包 下载安装 CD 和 stage3 包: http:// ...

  8. window国际化文案

    越来越多的程序支持多语言切换,或者能自动适应当前系统语言,让自己开发的程序支持多语言不仅可以让自己的程序被国人使用,也能让外国程序爱好者使用.VC开发多语言程序有多种方法,或读取配置文件,或使用不同资 ...

  9. toastr

    $(function(){     //参数设置,若用默认值可以省略以下面代     toastr.options = {         "closeButton": false ...

  10. 020自动化测试 PK 手动测试

    一.手工测试为什么不可替代 手工测试是不可替代的,因为人是具有很强只能判断能力的,而工具是相对机械缺乏思维能力的东西 工具是人开发出来的 二.手工测试不可替代的表现 测试用例的设计:需要tester有 ...