巧妙利用content
在 Chrome 器下,所有的都持 content属性,而其他器仅在::before/::after 中才有效。
利用content实现动态效果。
<style type="text/css">
/*如果图片原来是有src地的,我们也是可以使用content属性把 图片内容给换的,于是,我们就能实现hover图片成另外一图片的效果*/
.emoji:hover {
content: url(laugh-tear.png);
}
</style>
<body>
<img class="emoji" src="laugh.png">
</body>
实现效果:
鼠标经过前:
鼠标经过时:
content与替换元素:
替换元素之所以为替换,就是因为其内容可替换,而这个内容就是 margin、border、 padding 和 content 这 4 个子中的 content box,对应的 CSS 属性是 content,所以,从 理论层面讲,content 属性定了是替换还是非替换。
理论太虚,我们还是看一些有趣的真实例。在开始之前,我们需要感 Chrome 器,Chrome 器的表现帮助我们更好地理解了替换。什么表现呢?就是在 Chrome 器下,所有的都持 content属性,而其他器仅在::before/::after 中才有持。因此,下面的所有例,请在 Chrome、Safari、Opera 等器下查看。
前面已经证明了,没有src属性的是非替换元素,但是,如果我们此时使用content 属性给生成一图片呢?
使用content 属性给生成一图片:
<style type="text/css">
div>img:first-child:not(src){
content:url(1.jpg);
}
div>img{
width: 200px;
height: 150px;
}
</style>
<body>
<img>
<img src="1.jpg">
</body>
效果:
第一张是利用content属性生成的图片,第二张是正常img。
所以到底替换元素是什么?与非替换元素有什么区别?分别有什么联系及如何利用它们之间与content的关系?
- 非替换元素:(X)HTML 的大多数元素是非替换元素,他们将内容直接告诉浏览器,将其显示出来。且元素一般拥有固定的尺寸(宽高或宽高比)。html中像这样的元素有img, input, textarea, select, object,这些都是替换元素,这些元素都没有实际的内容。
- 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。就像img元素通过src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,却看不到图片的实际内容。重点是属性与标签,有许多选择像
<input type="">
type可以是button或text等等,不像<p>、<div>、<strong>
等等,直接将内容告诉浏览器。 - 关于与content的关系,非替换元素通过用content使内容可以替换,可以说成是非替换元素变成了替换元素。就像
h1 { content: url(logo.png); }
。