用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属性实现图片居中(代码实例 ...
随机推荐
- 【HDOJ】3007 Buried memory
1. 题目描述有n个点,求能覆盖这n个点的半径最小的圆的圆心及半径. 2. 基本思路算法模板http://soft.cs.tsinghua.edu.cn/blog/?q=node/1066定义Di表示 ...
- git stash
https://git-scm.com/docs/git-stash NAME git-stash - Stash the changes in a dirty working directo ...
- Unity3D之如何创建正确的像素比在屏幕上
关于这篇文章的命名,实在不知道怎么命名好,大概功能就是:比如一张宽高为100x100的图片显示在屏幕上,那2D摄像头的Size值为多少时,屏幕上显示出来图片大小和图片的实际像素一致. 这里涉及到一个G ...
- 【持续更新】D3 的学习资料
经常有朋友问哪里有关于 D3 的比较好的学习资料,现整理成此文.以后找到更多更好的,会不断更新本文. 我是在2013年开始接触 D3 的,当时就觉得这个工具很好玩.至今,学习资料整理了不少.如果有朋友 ...
- 15个极好的Linux find命令示例(二)
前阵子,我们审查了15件实事 find命令的例子(第一部分).查找命令可以做很多比只是在寻找基于名称的文件 (第2部分)在这篇文章中,让我们来讨论15高级find命令的例子, 包括-根据它访问,修改或 ...
- (转)MySQL数据库引擎ISAM MyISAM HEAP InnoDB的区别
转自:http://blog.csdn.net/nightelve/article/details/16895917 MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎 ...
- 如何在网页中显示pdf
用如下的html代码即可(例子): <div class="postBody"> <div id="cnblogs_post_body"> ...
- Apache Mina原理及典型例子分析
Apache Mina ,一个高性能 Java 异步并发网络通讯框架.利用 Mina 可以高效地完成以下任务: TCP/IP 和 UDP/IP 通讯 串口通讯 VM 间的管道通讯 SSL/TLS JX ...
- Base-Android快速开发框架(四)--网络操作之FastJson以及AsyncHttpClient
Android的展示数据,除了上章所讲的本地存储外,大部分数据都来自于网络.首先介绍一下Android APP开发常见的网络操作方式.从网络层面上有底层的tcp/ip,也就是我们常见的socket套接 ...
- 第四章:ARP 地址解析协议
网络接口有一个硬件地址,48bit的值,在硬件层次上进行的数据帧交换必须有正确的接口地址.tcp/ip有自己的地址,32bit的IP地址. 但是知道主机的IP地址并不能让内核发送一帧数据给主机.内核( ...