我想让文字显示在图片下方斜角的上方，该怎么做？
按我现在的代码来，斜角会遮住文字，我想让文字显示在斜角上方，该怎么做？
<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{}
村中长相较好的男子浏览 1297回答 1
1回答
-
qq_青枣工作室_0
<!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>
随时随地看视频慕课网APP
Html/CSS