在伪类中引入图片的一些问题

最新推荐文章于 2023-11-30 11:53:36 发布
最新推荐文章于 2023-11-30 11:53:36 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086982/article/details/95724175
版权

引入图片

  • 可以直接通过content:url()来引入图片，但是这种方法引入的图片，无法修改大小，因为伪类默认是行内元素的属性，设置width和height是无效的
  • 通过background-image,把图片当作背景图片引入。此时可以通过bakckground-size来修改图片大小

因为需要占位而导致的图片无法显示

  • 在上述第二种方法下，需要content之内必须有实际内容，背景图片才会相应的显示出来，而很多时候我们希望content就是空的。所以我们需要额外设置display: block;属性，设置这个属性后，大概率的你会希望图片不要重复展开，那么需要设置background-repeat:no-repeat(此时width/height属性也就可以使用了)
南乡人
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
content:url()中的图片无法设置宽高
qq_16746441的博客
11-22 3718
项目中遇到 随手记录 ::before ::after等伪类中使用content:url()中的图片无法设置宽高 原文链接 https://blog.csdn.net/sinat_34930640/article/details/78676096
伪类插入图片
m0_47974640的博客
05-30 500
.content::after { width: 64rpx; height: 64rpx; content: ''; position: absolute; background-size: 100% 100%; margin: 32rpx auto; left: 0; right: 0; background-image: url('图片链接'); }
css插入图片，css伪类hover插入图片
最新发布
weixin_43923808的博客
11-30 789
【代码】css插入图片，css伪类hover插入图片。
before伪类插入图片
weixin_33739523的博客
06-27 3091
需求： 图片放在div里，原来这种需求最先想到的就是定位，但是如果还有其他定位元素的时候，就很容易相互影响，所以这里尝试一下before伪类来实现 <div class="box"> <!--<img class="prizeBg doorImg1" src="doorImg1.png"/>--> </div> 　　 ...
背景图片_伪类选择器
unlockmyname的博客
06-06 381
1.background背景图片 background-image: url(地址); 背景图片平铺,默认是铺满整个父区域. 注意地址的准确,和img有点点不一样. background-repeat: no-repeat; 背景图片不平铺,只显示一张,不管一张图够不够 铺满. background-repeat: repeat-x; 横向平铺 background-repeat: repeat-y; 纵向平铺 background-repeat: cover;
利用伪类创建图片相册
weixin_45558480的博客
08-29 200
使用隐藏的radioboxes中的:checked伪类来构建一个只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册 <div id="gallery-container"> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label"><img src="images/1s.jpg" class="gallery-preview" /></label&g
纯CSS3伪类实现icon标签效果
06-12
并且没有使用任何图片之类的东东，主要依靠CSS3代码中的::before ::after两个伪类 以前我还是比较忽视这两个家伙的，今天第一次见到原来伪类的好处这么多，以后会多多推荐CSS3伪类实现的效果 使用方法： 1...
IE6下PNG图片透明问题解决方案集锦
09-25
这是基于微软的Vector Markup Language (VML) 的解决方案，它可以完美地处理PNG图片的透明效果，包括`background-position`和`background-repeat`属性，甚至支持`a:hover`等CSS伪类。使用方法是在页面中引入...
css3伪放大镜(图片放大动画)效果
11-17
3. **伪类`:hover`**：当鼠标悬停在图片上时，我们改变`.magnifier`的样式，使其显示放大效果。这通常通过CSS3的`transform`属性实现，包括`translate`和`scale`。同时，可以添加关键帧动画来平滑过渡。例如： ```...
css3伪放大镜(图片放大动画)效果.zip
09-25
1. **伪类选择器**：CSS3引入了`:hover`伪类，当鼠标指针位于某个元素之上时，我们可以为该元素应用不同的样式。在这个例子中，`:hover`被用来触发图片的放大效果。 2. **CSS3 Transforms**：变换属性允许我们旋转...
一些上流的CSS3图片样式
08-05
以下是一些可能包含在博文中的CSS3图片样式的知识点： 1. **渐变背景**：CSS3允许我们创建线性或径向渐变作为背景，而不是只能使用单一颜色。例如，`background-image: linear-gradient(to right, red, yellow);` ...
html伪类替换图片,css之Content-替换元素
weixin_32357285的博客
06-07 694
壹 替换元素[toc]1、what 替换元素我们根据外在盒子可以分为内联元素和块级元素，根据是否具有可替换内容，我们也可以分为替换元素和非替换元素我们把通过修改某个属性值呈现的内容就可以被替换的元素称为替换元素， 这一类都是典型的替换元素特点：内容不受页面上的css的影响，样式表现在css作用域之外，如果要替换元素本身的外观，需要类似appearance的属性。或者是浏览器本身暴露的接口。但是直...
vw适配中使用伪类选择器及IOS图片加载不出来
Javon_huang的博客
04-27 382
使用postcss-viewport-units做vw单位转换时遇到以下两个问题： 1、伪类选择器被转换，导致icon的加载不出来 解决办法：设置转换规则 module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini"...
html伪类元素加图片,CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号...
weixin_35042833的博客
06-04 3366
before: 伪元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符、属性插入图片css3.p_before:before {content: 'H';color: #01B4EE;}.p_beforeImg {background: #eeeeee;width: 200px;height: 80px;border-radius: 6px;padding...
伪类实现图片膨胀
只作为个人备忘录
01-31 697
div{ width:280px; height:156px; border:1px solid red; margin:100px auto; overflow:hidden ; } img{ vertical-align:top; transition:all 2s; width:280px; height:156px; }
html伪类选择器图片,css3 伪类选择器快速复习小结
weixin_35076990的博客
06-25 169
前言如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计.本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们:first-childlast-childfirst-of-typelast-of-typeonly-childonly-of-typenth-childnth-last-ch...
超酷的纯CSS，伪类图片浏览器实例
wenweijing的专栏
01-19 765
       鼠标停留在缩略图上，利用a:hover绝对定位了大图片。点击缩略图会利用a:active ,点击后大图片就固定到那里。非常巧妙的想法。CSS在国外研究的太深奥了。 此例子供大家学习和讨论。 style type=text/cssa, a:visited, a:hover {color:#000;}#container {posit<br />       鼠标停留在缩略图上，利用a:hover绝对定位了大图片。点击缩略图会利用a:active ,点击后大图片就固定到那里。非常巧妙的想法。CSS
使用伪元素插入图片大小调整问题
CSDdas的博客
04-13 3904
使用伪元素插入图片大小调整问题
css – 调整content属性的图像大小
duguxueao的专栏
10-12 4565
我有一个无序的链接列表，每个链接都有唯一的ID。 我正在使用该id与：before selector放置 链接前的相关网站的favicon(使用content属性)。 其中一个图标是其他图标的两倍。 有没有办法使用CSS改变这个图标的大小？ 如果答案是否定的，除编辑图像外，还有什么办法吗？ 视觉参考： 这是我尝试的(它似乎不起作用)： #geog:before { content: url("icons/geogebra.ico") " "; height: 50%...
html鼠标悬停图片变换特效
06-11
可以通过CSS来实现鼠标悬停图片变换特效，具体步骤如下： 1. 在HTML中，使用`<img>`标签引入需要显示的图片，并设置一个`class`属性，用于后面的CSS样式选择器。 ``` <img src="image.jpg" class="hover-effect"> ``` 2. 在CSS中，选择需要添加鼠标悬停特效的图片，并设置`hover`伪类。 ``` .hover-effect:hover { /* 在这里设置图片的样式，例如更换图片 */ } ``` 3. 在`hover`伪类中，可以通过`background-image`属性来更换图片。 ``` .hover-effect:hover { background-image: url("hover-image.jpg"); } ``` 这样，当鼠标悬停在图片上时，图片就会显示出特效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值