[英]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.