web前端学习——css背景

最新推荐文章于 2022-12-03 22:21:39 发布

岁秋

最新推荐文章于 2022-12-03 22:21:39 发布

阅读量646

点赞数 1

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/m0_46476764/article/details/109085250

版权

前端学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

css背景

1.背景图片

使用background-image来设置背景图片；

语法：background-image:url(相对路径);
这个相对路径是相对于自己本身，例如styles文件夹里的css文件写有该属性，则其相对路径为background-image:url(../images/1.png);
如果图片大小大于元素则会默认显示图片的左上角；
图片和元素一样大就会全部显示；
如果背景图片小于元素大小，则会默认将背景图片平铺（一直重复）以充满元素。
背景颜色和背景图片一般都是同时设置的，在图片未被加载出来时，可以先有个背景色，背景颜色永远在图片下面，作为背景图片的背景色，不会覆盖到背景图片上，只会在空隙处显示。
那么怎么设置不重复图片或图片重复方式呢？
使用background-repeat属性；
例子：

.p1{
background-color:red;
background-image:url(../images/1.png);
background-repeat:no-repeat;//不重复
}

可选值：

repeat：默认值，图片会双方向重复（平铺）。
no-repeat:图片不会重复，有多大就显示多大的图片在元素上。
repeat-x：图片在水平方向上（x轴）重复。
repeat-y：图片在垂直方向上（y轴）重复。

2.背景图像的位置

图像默认是贴在页面的左上角显示的。
要怎么设置背景图像的位置呢？
可以通过background-position来设置背景图像位置。
可选值：

有五个参考值：top bottom left right center；
使用方法：
background-position:top left;这就是默认效果左上。
该属性使用上面的两个值组合来进行位置设置，就像九宫格。（注意组合的逻辑，别：right left）
如果只写一个值，那么第二个值就是默认center；
也可以直接指定水平方向(第一个值)和垂直方向（第二个值）的偏移量。（可使用百分比或者直接指定像素）
background-position:100px 50px;
偏移量的正负值：
水平方向：如果偏移量为正值，那么就是向右移动指定的偏移量，如果偏移量为负值，则向左移动指定的偏移量。
垂直方向：如果偏移量为正值，那么向下移动指定的偏移量。如果偏移量为负值，那么向上移动指定的偏移量。
（负值用的会比较多，因为一些页面上的按钮都是用的雪碧图做背景，即几张图片合成的一张图，为了一次性加载全部效果，不用一个效果请求次图片，导致闪烁，延迟，所以按钮什么的效果都是一张图，转换效果就是更换位置。）

3.背景图片不随页面滚动而滚动

background-attachment可以用来设置背景图片不随页面一起滚动（看的博客就是这样，背景图片永远是固定的，就前面的文字在上下移动）
可选值：
scroll：默认值。背景图片随着窗口滚动。
fixed：图片背景不会随着页面滚动，会固定在一个位置
（注意：如果设置了background-attachment:fixed;那么background-position:center;设置的位置就会变为当前可见页面的中间，或其他设置时就是其他位置，比如页面很长时，本来看不到背景图片的，一设置了attachment，图片就会出现在现可见视图中）
一般不随窗口滚动的图片只设置给body，而不设置给其他元素，具体看要什么效果。
例子：

body{
background-color:red;//背景颜色
background-image:url(../images/1.png);//背景图片
background-repeat:no-repeat;//不重复
background-position:center center;//居中显示
background-attachment:fixed;//不随页面移动
}

4.背景属性的简写方式

设置一个背景要写这么多行代码，很麻烦，就可以使用简写属性。
background——通过该属性可以同时设置所有背景相关的样式，没有顺序要求，也没有数量要求，不写的就使用默认样式。
backgrounf:#bfe url(1.png) no-repeat center center fixed;
与其他简写属性一样，如果写在后面，其效果会覆盖前面分开设置的效果，未写的，就将采用默认值。

5.ie6png修复

注意：ie6对图片格式png24支持度不高，不能显示透明部分的效果。
ie6对png24：
在这里插入图片描述
火狐对png24：

解决方法：
1.使用png8代替png24，当时图片清晰度，效果变差。
2.使用JavaScript来解决，需要向页面中引入一个外部的JavaScript文件，然后再写一个简单的js代码。

<!--在body的最后引入外部的js文件-->
<script type="text/javascript" src="DD_belatefixPNG_0.0.8a_min.js"></script>
<!--创建一个新的JavaScript标签，写一段js代码-->
<script type="text/javascript">
DD_belatePNG.fix("img");//调用上面那个修复代码，括号内写的是选择器，看要修复哪。
</script>

虽然该代码在任何浏览器运行都不会有问题，但是怎么指定其只在ie6里运行呢？
看下面css hack

6.CSS Hack

有一些情况，有一些特殊的代码我们只需要在一些特殊的浏览器（ie）中执行，而在其他浏览器中不需要执行，这时就可以使用CSS Hack。

CSS Hack实际上指的是一个特殊的代码。用于解决兼容性，这些代码只可以在某些浏览器中被识别，而在其他浏览器中不能被识别。通过这种方式来对一些特殊的浏览器设置特殊的代码。

1.条件Hack

条件hack只对ie浏览器有效（且ie10及以上都不再支持了），其他浏览器都会将其识别为注释。代码如下：

<!--[if IE 6]>//后面这个6（版本号）就是条件，不指定的话就ie10以下都可以看到。
内容：<p>尽量不要再使用ie6</p>
<[endif]-->
<!--[if lt IE 9]>//lt指的是小于，gt大于同理，
lte：小于等于；！：非此版本
内容：<p>仅仅在ie9以下显示</p>
<[endif]-->

该p标签内容只会在ie10以下（不包括10）浏览器中显示；

上面的js代码套用条件hack
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatefixPNG_0.0.8a_min.js"></script>
<script type="text/javascript">
DD_belatePNG.fix("img");
</script>
<[endif]-->
甚至为ie10以下浏览器专门建立样式表
<link rel="stylesheet" type="text/css" href="style/css.css" />//正常浏览器使用
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css-ie8.css" />
<[endif]-->
因为放在正常样式表下，所有当在ie8中执行时，会执行第二个，也就是在条件hack中的那个；