按我現(xiàn)在的代碼來，斜角會遮住文字，我想讓文字顯示在斜角上方，該怎么做？<figure?class="test5">
????<img?src="image/2.jpg"/>
????<figcaption>
????????<div?class="text">
????????????<h2>動畫</h2>
????????????<p>路人甲到此一游</p>
????????</div>
????????<div></div>
????</figcaption>
</figure>CSS代碼：figure{position:?relative;width:?25%;overflow:?hidden;float:?left;}
figcaption{position:?absolute;top:?0;left:?0;font-family:?"宋體";color:red;}
.test5?figcaption{width:?100%;height:?100%}
.text?{position:absolute;padding-left:?40%;padding-top:?70%;z-index:?1}
.test5?figcaption?div{position:absolute;width:?120%;height:?100%;
????background-color:?#9d9d9d;transform:?translate(0px,200px)?rotate(165deg);}
.test5:hover?figcaption?div{}
1 回答
已采納
qq_青棗工作室_0
TA貢獻446條經(jīng)驗 獲得超754個贊
<!DOCTYPE?html>
<style>
figure{position:?relative;width:?25%;overflow:?hidden;float:?left;}
figcaption{position:?absolute;top:?0;left:?0;font-family:?"宋體";color:red;}
.test5?figcaption{width:?100%;height:?100%}
.text?{position:absolute;padding-left:?40%;padding-top:?70%;z-index:?1;transition:all?.5s;}
.test5?figcaption::after{content:'';position:absolute;width:?120%;height:?100%;
????background-color:?#9d9d9d;transform:?translate(0px,200px)?rotate(165deg);}
.test5:hover?.text{padding-top:47%;}
</style>
<figure?class="test5">
????<img?src="image/2.jpg"/>
????<figcaption>
????????<div?class="text">
????????????<h2>動畫</h2>
????????????<p>路人甲到此一游</p>
????????</div>
????</figcaption>
</figure>
添加回答
舉報
0/150
提交
取消