CSS-常用样式-–-背景属性，高级前端面试题

最新推荐文章于 2024-10-19 22:37:22 发布

2401_83974117

最新推荐文章于 2024-10-19 22:37:22 发布

阅读量927

点赞数 9

分类专栏： 2024年程序员学习文章标签：前端 css

本文链接：https://blog.csdn.net/2401_83974117/article/details/137295905

版权

2024年程序员学习专栏收录该内容

258 篇文章 2 订阅

订阅专栏

背景颜色

二、背景图片 background-image

属性名：background-image
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径

.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; 背景颜色 */
background-image: url(images/lagouwang.jpg);
}

如果图片不重复，从 border 以内开始加载
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色

三、背景重复 background-repeat

属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载
根据属性值不同，有四种重复加载方式

.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; 背景颜色 /
background-image: url(images/lagou_small.jpg);
/ background-repeat: repeat; /
/ background-repeat: no-repeat; /
/ background-repeat: repeat-x; */
background-repeat: repeat-y;
}

四、背景定位 background-position

属性名：background-position
作用：主要用于设置不重复的图片在背景区域的加载开始位置
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法
属性值都有两个，值之间用空格分隔
第一个属性值：表示背景图片在水平方向的位置
第二个属性值：表示背景图片在垂直方向的位置

①、单词表示法

属性值都是使用代表方向的单词进行书写
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐

background-position: right bottom; /* 对应方向对齐 */

②、像素表示法

使用像素值作为背景定位的属性值
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离

background-position: 50px 50px;

像素值区分正负，正负代表位移方向不同：

正数：表示图片针对盒子的原点向右、向下移动
负数：表示图片针对盒子的原点向左、向上移动

百分比表示法使用百分比数字作为属性值

100% 代表的数值：
水平方向，等价于盒子的 border 以内的背景区域宽度减去图片的宽度
垂直方向，等价于盒子的 border 以内的背景区域高度减去图片的高度

五、背景附着 background-attachment

属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。属性值

六、综合写法 background

background 属性可以将五个单一属性的值进行合写
属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置

body {
background: url(images/bj.jpg) no-repeat center top scroll #666;
}

注意事项：

①、如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

background: pink;

②、如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠

body {
background: url(images/bj.jpg) no-repeat center top #666;
background-attachment: scroll;
}

七、背景应用

①、替换插入图

h1 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等
另外
内部的文字，可以帮助提高 SEO 搜索排名
在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字

背景图替换插入图方法

如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给标签或标签

Document

h1 {
width: 200px;
height: 100px;
}

h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
}

今天|太阳|真好|666

文字隐藏方法

1、将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题

font-size: 0;

2、可以设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏

h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
/* font-size: 0; */
text-indent: -20em;
overflow: hidden;
}