网页背景居中的方法有很多种的。这里介绍一些用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. C++ volatile的作用

    volatile的作用     2006-10-23 13:44:21 大 中 小 关键在于两个地方:     1. 编译器的优化 (请高手帮我看看下面的理解) 在本次线程内, 当读取一个变量时,为提 ...

  2. 在Visual Studio 2010中使用DSL Tool特定领域开发 开篇

    本来是很想写关于VS的DSL的文章的,有点小忙,就一直在拖延,忽然有看见了"<在Visual Studio 2012中使用VMSDK开发特定领域语言>",又有写的欲望了 ...

  3. 记录遇到的IE8兼容性问题汇总

    1,伪元素:first-child不起作用,需要单独指定样式名称 2,透明度表示方法,尤其在函数中表示 @mixin opacity($value) { -webkit-opacity: $value ...

  4. CentOS6脱机rpm安装MariaDB10

    转载请保存原文链接:http://www.wlm.so/Article/Detail/lmb4cijci5mc900000 1.卸载原有mysql安装包,避免安装文件冲突 #查找所有的mysql包 r ...

  5. C#控件背景透明的几种解决方案

    已经很少做winform程序了,最新参与了一个小项目,遇到了控件背景透明的功能要求,特在此总结一下,供有需要的同行参考. 0.背景透明的概念和分类 背景透明是啥意思呢,就是背景透明.哈哈,废话了.其实 ...

  6. 在线API,桌面版,jquery,css,Android中文开发文档,JScript,SQL掌用实例

    学习帮助文档大全 jquery,css,Android中文开发文档,JScript,SQL掌用实例 http://api.jq-school.com/

  7. OK335xS tmp75 Qt 温度读取

    /******************************************************************* * OK335xS tmp75 Qt 温度读取 * 说明: * ...

  8. shell脚本编写笔记

    包含转载内容,转载自http://wenku.baidu.com/link?url=jtCHxEYzgGve6P64U3JRQRgU6nhpGvqFLLpWu9I2Htq6hi9TGLudRFkk7r ...

  9. WCF测试工具,post经验

    以前使用WCF的post的时候总是不知道怎么传值,需要注意2方面 1.头可以用Json或者是xml来传值 Content-Type: application/json; charset=utf-8 2 ...

  10. HIbernate学习笔记(五) 关系映射之一对多与多对一

    三.       多对一 –单向 场景:用户和组:从用户角度来,多个用户属于一个组(多对一 关联) 使用hibernate开发的思路:先建立对象模型(领域模型),把实体抽取出来. 目前两个实体:用户和 ...