前端笔记—从入门到坟墓[CSS][CSS继承性、background样式][6]

本文链接：https://blog.youkuaiyun.com/qq_29018891/article/details/83000449

本文深入探讨CSS中样式继承的特性，详细列举了可继承与不可继承的属性，并重点讲解了背景属性的使用，包括background-repeat、background-position、background-attachment及综合设置方法。同时，介绍了利用CSS实现鼠标悬停按钮图片切换和input标签内添加小图标的技术方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 的继承性

样式的继承性总结：
CSS中可以和不可以继承的属性

> 有继承性

与文本有关的如颜色（color），字号，以text-、font-、line-开头的都可以继承。

除上面外还有一些特殊的样式具有继承性：
元素可见性（visibility）列表布局属性（list-style-type等）光标属性（cursor）页面样式属性（page、windows、orphans）

> 无继承性：

盒子模型的属性（width、height、margin 、border、padding等），背景属性（background等），定位属性（float、position、left、overflow、z-index等），生成内容属性（content等），轮廓样式属性（outline-style等）。

在文本属性也有一些特殊的没有继承性的：
vertical-align：垂直文本对齐、text-decoration：规定添加到文本的装饰、text-shadow：文本阴影效果、white-space：空白符的处理、unicode-bidi：设置文本的方向。

background样式

background-repeat指定如何重复背景图像，属性：repeat平铺，no-repeat不平铺，repeat-x|repeat-y水平/垂直方向设置平铺。

background-repeat: no-repeat;

background-position指定背景图像的位置，属性：center水平居中等。

注：可以传入两个参数，分别对应水平和垂直方向

background-position: left bottom;

background-attachment设置背景图像是否固定，属性：fixed固定不动，scroll默认，随对象滚动。

background-attachment:fixed;

background设置背景属性。属性连写，以空格为间隔，分别对应背景颜色（可省略），图片url，是否平铺，是否固定（可省略），位置。

background: #ccc url("img/button.jpg") no-repeat fixed left top;

注：可以使用rgba()方式设置背景半透明（属于css3），如：background-color: rgba(255,0,0,0.3)

> 实现鼠标进入按钮图片切换

具体实现思路：通过快速改变背景图片的相对位置，实现鼠标进入按钮，按钮发生变化。如图：
在这里插入图片描述

 a{
	width:100px;
	height: 50px;
	display: block;
	background: url("img/button.jpg") no-repeat left top;
}
a:hover{
 	background-position: left bottom;
}

<a href="javascript:;"></a>

> 实现input标签内加入小图标

实现思路：为input标签添加padding-left值，使之写入的内容右移，而左边空出的区域设置背景。

input{
    background-image: url(img/timg.jpg);
    background-repeat: no-repeat;
    background-position: 2px center;
    padding-left: 20px;
    border:1px solid #000;
}