[英]H1:before trouble involving image
我试图制作一个看起来像这样的CSS标题
我将三角形作为具有透明度的png,但我之前并没有真正使用过伪元素,所以如果有人能帮助那就太棒了。
到目前为止,我有这个:
h1 {text-transform: uppercase;font-weight: 600; margin: 0; padding: 0;}
h1:before {
content: url( "../images/triangle.png" ) ;
margin-right: -50px;}
这会正确地水平放置文本,但我找不到垂直放置文本的方法
您可以使用以下css并通过位置管理:
h1 {
text-transform: uppercase;
font-weight: 600;
margin: 0;
padding: 0;
position: relative
}
h1:before {
content: "";
position:absolute;
width: 40px;
height: 40px;
background: url( "../images/triangle.png" );
right: -50px;
top: 0px;
}
请检查小提琴 - http://jsfiddle.net/afelixj/obmwncd4/
要添加背景图像,请删除h1:before
所有边框,然后添加图像的宽度和高度
所以你想让文字垂直? 尝试这个
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
你可以尝试这样: 演示
h1 {
text-transform: uppercase;
font-weight: 600;
margin: 0;
padding: 0;
position:relative;
z-index:9999;
line-height:80px;
text-indent:20px;
}
h1:before {
width: 0;
height: 0;
margin: 0;
padding: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
content:"";
display:block;
position:absolute;
z-index: -1;
/* to be below the parent element */
}
HTML:
<h1>fddfgfdg</h1>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.