您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用CSS剪辑/裁剪背景图像

使用CSS剪辑/裁剪背景图像

您可以将图形放置在具有其自身尺寸上下文的伪元素中:

#graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}



#graphic {

    width: 200px;

    height: 100px;

    position: relative;

}

#graphic::before {

    content: '';



    position: absolute;

    width: 200px;

    height: 50px;

    z-index: -1;



    background-image: url(http://placehold.it/500x500/); /* Image is 500px by 500px, but only 200px by 50px is showing. */

}


<div id="graphic">lorem ipsum</div>

浏览器支持很好,但是如果需要支持IE8,请使用单个冒号:beforeIE在此之前的版本中均不支持这两种语法。

CSS 2022/1/1 18:17:38 有425人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶