• 欢迎访问小杰博客网站
  • 欢迎访问小杰博客网站哦

css图片边角倾斜的文字描述

未分类 小杰 3年前 (2015-10-30) 359次浏览 已收录 0个评论

css图片边角倾斜的文字描述:

html:

    <div class=”book-recommend”>
      <ul>
        <li><a href=”/detail=398705811″><img src=’***.jpg’><div class=”label-wrap transparent”><span>推荐</span></div></a></li>
        <li><a href=”/detail=405458225″><img src=’***.jpg‘><div class=”label-wrap transparent”><span>推荐</span></div></a></li>
        <li><a href=”/detail=369029511″><img src=’***.jpg‘><div class=”label-wrap transparent”><span>推荐</span></div></a></li>
      </ul>
    </div>

css:

.transparent {filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.bg-gray {background-color: #cccccc;}
.label-wrap {position: absolute;left: -60px;top: -60px;width: 100px;height: 100px;color: #fff;overflow: hidden;z-index: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.label-wrap span {display: block;width: 100%;background-color: red; position: absolute;bottom: 10px;left: 0;text-align: center;font-size:10px;}
    
.book-recommend ul{margin:20px 0 20px 0;}
.book-recommend ul li{display:inline-block;overflow:hidden;margin-right:10px;}
.book-recommend ul li a{display:block;position:relative;}
.book-recommend ul li a img{width:90px;height:auto;}


小杰博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css图片边角倾斜的文字描述
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址