CSS小技巧之替换图片(content) |
您所在的位置:网站首页 › html中如何添加图片和文字内容一致 › CSS小技巧之替换图片(content) |
一想到替换图片,我们大部分人可能都会想到用background-image或用两个img元素控制显示隐藏来实现,其实还可以利用css的content属性来替换img中的内容来实现。 Part 11.首先我们使用content属性来生成一张图片,先写两个img标签 ![]() 2.第一个img用src引入一张图片,第二个img是个空标签,注意这里不要写src属性,就是一个单纯的< img >!然后写css img { width: 200px; height: 200px; } img:not([src]) { content: url("img/qq.jpg"); }3.用谷歌浏览器运行,可以看到这两个img标签的显示效果一模一样!
1.如果我们把上面的代码稍微修改一下,会发生怎样的变化呢 ![]() 2.如下图所示,可以发现content属性把原来图片中的内容替换掉了! 利用这个特点,我们可以使用hover图片让它变成另外一张图片 ![]() 注意⚠️:content改变的仅仅是视觉展现效果,当我们右键保存或打开这张hover之后的图片时,所保存的和看到的还是原来src对应的图片! Part 4content属性不仅可以替换img标签的图片,还可以替换普通标签的内容 举个例子,看如下代码: 陈仙生的头像 h1 { content: url("img/qq.jpg"); width: 200px; }运行结果就是一张图片,没有文字!
此外,我们还可以配合before或after伪类给空标签生成文本,如下: h1:before { content: '我是content生成的内容'; width: 200px; }
我觉得content属性用的最常见的地方之一是清除浮动带来的影响: .clear_fix:after { content: ''; display: block; clear: both; }还有就是配合 @font-face 字体图标的实现: .icon-xxxx:after { content: '\xxxx'; } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |