如何解决为什么CSS伪元素在图像中不起作用
首先,我试图用类似的问题在堆栈溢出中寻找答案,但结果仍然相同,没有显示我的意思。
这是我的html结构:
<div class="header__shape">
<img src="img/rose.png" alt="rose couples" class="header__shape-img">
<p class="header__shape-quote">
Being someone’s first love may be great,<br>
but to be their last is beyond perfect.
</p>
</div>
这是给我的CSS以及伪::: before
&-quote{
position : absolute;
font-size : $font-size-2;
font-family: $font-secondary;
color : $color-font;
line-height: 1.3;
right : 45rem;
top : 45rem;
&::before{
content : "";
background-image: url(../../img/quote.png);
height : 50px;
display : block;
width : 50px;
}
}
解决方法
这是我要解决的方法。首先,您需要给父级一个position: relative
,以便在p
div
标签。
然后赋予伪元素绝对位置,以使其在p
标签周围移动。
.header__shape {
position: relative;
}
.header__shape-quote {
line-height: 1.3;
font-size: 3rem;
color: red;
position: absolute;
right: 30rem;
top: 40rem;
}
.header__shape-quote::before {
font-size: 4rem;
position: absolute;
top: -50px;
left: -60px;
/* must have for fontawesome */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10e";
}
并以另一种方式。我个人推荐这个。以上示例中的绝对值。但我不知道哪个更适合您。所以我都加了
.header__shape {
position: relative;
}
.header__shape-quote {
line-height: 1.3;
font-size: 3rem;
color: red;
margin-left: 5rem;
margin-top: 5rem;
position: relative;
}
.header__shape-quote::before {
font-size: 4rem;
position: absolute;
top: -50px;
left: -60px;
/* must have for fontawesome */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10e";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<div class="header__shape">
<img src="https://picsum.photos/600" rose couples class="header__shape-img">
<p class="header__shape-quote">
Being someone’s first love may be great,<br> but to be their last is beyond perfect.
</p>
</div>
编辑
使用资产是正常的。只需在URL
中添加路径,并分别给其height
和width
,就可以了。
.header__shape {
position: relative;
}
.header__shape-quote {
line-height: 1.3;
font-size: 3rem;
color: red;
margin-left: 5rem;
margin-top: 5rem;
position: relative;
}
.header__shape-quote::before {
font-size: 4rem;
position: absolute;
top: -50px;
left: -60px;
/* must have for fontawesome */
display: inline-block;
/* content: url('../images/caret-down-solid.svg'); */
content: url("https://picsum.photos/40");
}
<div class="header__shape">
<img src="https://picsum.photos/600" rose couples class="header__shape-img">
<p class="header__shape-quote">
Being someone’s first love may be great,<br> but to be their last is beyond perfect.
</p>
</div>
您也可以将其添加为background-image
,而不是在URL
中添加content
。很好。
.header__shape {
position: relative;
}
.header__shape-quote {
line-height: 1.3;
font-size: 3rem;
color: red;
margin-left: 5rem;
margin-top: 5rem;
position: relative;
}
.header__shape-quote::before {
font-size: 4rem;
position: absolute;
top: -50px;
left: -60px;
/* must have for fontawesome */
display: inline-block;
content: "";
height: 40px;
width: 40px;
/* background: url('../images/caret-down-solid.svg') no-repeat; that works fine i'm just using external link */
background: url('https://picsum.photos/40') no-repeat;
}
<div class="header__shape">
<img src="https://picsum.photos/600" rose couples class="header__shape-img">
<p class="header__shape-quote">
Being someone’s first love may be great,<br> but to be their last is beyond perfect.
</p>
</div>
随时选择最适合您的方式。
那没有帮助吗?请告诉我。我会尽力帮助。
,您可以尝试添加<q>
标签,以便为<q>
标签添加CSS,可以添加CSS类
<div class="header__shape">
<img src="pic_trulli.jpg" alt="rose couples" class="header__shape-img">
<p><q>
Being someone’s first love may be great,<br>
but to be their last is beyond perfect.</q>
</p>
</div>
,
将float,background-size属性添加到伪元素的样式中,如下所示:
&-quote {
position : absolute;
font-size : $font-size-2;
font-family: $font-secondary;
color : $color-font;
line-height: 1.3;
right : 45rem;
top : 45rem;
&::before {
content : "";
background-image: url(../../img/quote.png);
height : 50px;
width : 50px;
/* new properties */
float: left;
background-size: contain;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。