用CSS让网页背景图片居中的方法
网页背景居中的方法有很多种的。这里介绍一些用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让网页背景图片居中的方法的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS中让背景图片居中且不平铺
background:url(../images/logo.jpg) no-repeat center ;
- css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
- IE/Chrome背景图片居中1px偏移解决方法
最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
随机推荐
- Android开发之自定义组合控件
自定义组合控件的步骤1.自定义一个View,继承ViewGroup,比如RelativeLayout2.编写组合控件的布局文件,在自定义的view中加载(使用View.inflate())3.自定义属 ...
- kali获得已经安装的软件列表
有人说是用dpkg -l ,也有说是用dpkg --get-selections. debian:~# dpkg -l|grep install|wc -l2678debian:~# dpkg --g ...
- centos 如何用 rsyslog 搭建本地日志服务(续1: omprog模块与php deamon的配合使用)
上一篇说到了如何用 rsyslog 搭建本地的日志服务,地址在这里,没有看的童鞋可以先瞅一眼 : http://www.cnblogs.com/smallrookie/p/5677004.html 显 ...
- UML中常见关系详解(泛化、实现、依赖、关联、组合、聚合)
UML中类与类,已经类与接口,接口与接口的关系有:泛化(generalization),关联(association),依赖(dependency),实现(realization)这几种. 泛化( ...
- bzoj1412
比较裸的最小割 注意狼和羊的领地可以通过空地相连 ; dx:..] ,,,-); dy:..] ,,,); type node=record next,point ...
- [POJ 3370] Halloween treats
Halloween treats Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7143 Accepted: 2641 ...
- amoeba安装与实现amoeba for mysql读写分离
运行环境 l CentOS6.3 l Jdk1.6.0_30 l amoeba-mysql-binary-2.2.0 l amoeba:192.168.88.17 l master1:192 ...
- gitphp日期乱码解决方案
出现日期乱码的在以下文件中 templates rss tag commitdiffplain log project commit 搜索文件中的 %z 修改为以下代码 {$commit->Ge ...
- puppet学习:类与类的依赖关系的问题
今天在部署Zabbix的Proxy时,在负责安装的Exec中去掉了一些无关的Package的依赖,结果,就出现了依赖关系的问题. 在zabbix::install中,我写的是require mysql ...
- #pragma warning (default : n)
参考链接:http://www.cnblogs.com/JCSU/articles/1996483.html 在VC2013中编译以下win32 C++ 控制台程序,会产生2个告警warnings # ...