html - 为什么 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;
}
}
解决方案
这是我将如何解决它。首先,您需要给父级 aposition: relative
以便p
在div
然后给伪元素位置 absolute 以在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>
您也可以将其添加为 abackground-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>
随意选择最适合您的方式。
那没有帮助?请告诉我。我会尽力提供帮助。
推荐阅读
- javascript - 如何将由 AJAX 检索到的 JSON 格式的字符串转换为类似格式的表格
- actionscript-3 - ios中的Adobe air全屏
- jquery - smarty 全局 url 调用 jquery 但 $ 未定义
- python-3.x - org.apache.spark.SparkException:作业因阶段失败而中止
- r - 如何配置未来以下载更多文件?
- apache - 断言来自聚合报告 Jmeter 的结果
- java - Java中的垃圾邮件/评论验证?
- java - 使用 FileReader read() 和 BufferedReader readLine() 计算文件的行数和字符的问题
- bash - 通过 shell 脚本执行命令时出现 Awk 语法错误,但是从 Linux bash shell 执行命令时可以正常工作
- vue.js - v-for 循环中使用的方法不返回值