css中设置background属性

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

举例：
下面这些例子使用下面这张图片做为背景图：

1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。

2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test background</title><style type="text/css">.backshow{width:320px;height:160px;border:3px solid #333;float:left;margin:10px;            }.bg1{background:cyan url(bg.jpg);}.bg2{background:cyan url(bg.jpg) repeat-x;}.bg3{background:cyan url(bg.jpg) repeat-y;}.bg4{background:cyan url(bg.jpg) no-repeat;}.bg5{background:cyan url(bg.jpg) no-repeat left center;}.bg6{background:cyan url(bg.jpg) no-repeat right center;}</style>
</head>
<body><div class="backshow bg1"></div><div class="backshow bg2"></div><div class="backshow bg3"></div><div class="backshow bg4"></div><div class="backshow bg5"></div><div class="backshow bg6"></div>
</body>
</html>

例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test background</title><style type="text/css">.backshow{width:320px;height:160px;border:3px solid #333;float:left;margin:10px;            }        .bg{width:94px;height:94px;border:3px solid #666;background:url(location_bg.jpg) -110px -150px;}</style>
</head>
<body><div class="bg"></div>
</body>

</html>

转载于:https://www.cnblogs.com/regit/p/8930022.html

css中设置background属性相关推荐

细说css中的background属性以及一些问题
1.background的属性 1.1background-color 属性设置元素的背景颜色. 这种颜色会填充元素的内容.内边距和边框区域,扩展到元素边框的外边界(但不包括外边距).如果边框有透明部 ...
CSS中设置border属性为0与none的区别
在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...
css中的background属性
文章目录一:background-repeat 二:background-position 三:background缩写方式三:background-size 四:background-origi ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
html设置单词间隔,css中设置英文单词之间间距的属性是什么
css中设置英文单词之间间距的属性是word-spacing.word-spacing属性可以增加或减少字与字之间的空白,如[p{word-spacing:30px;}]. 本文操作环境:window ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
在html中设置margin属性,css中margin的4个属性
CSS中:margin:auto与margin: 0 auto;有什么区别 CSS中:margin:auto与margin: 0 auto;有什么区别.有的网站中写的是前者意思不同.margin:au ...
关于cellpadding cellspacing 属性，无法在css中设置问题
1. 什么是table 的cellpadding cellspacing 属性 cellpadding:代表单元格边框到内容之间的距离(留白) cellspacing:用来指定表格各单元格之间的空隙. ...
【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺发布时间:2021-04-29 15:39:28 来源:亿速云阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...

css中设置background属性

css中设置background属性相关推荐

最新文章

热门文章