🪴qql1's digital garden

图片样式

1分钟阅读

CSS

部分显示图片

child::

部分显示图片

梗概

  • 对一个元素设置背景图片，并从指定位置开始显示一段距离

适用范围

场景

实例

我们使用这种单个图像（“img_navsprites.gif”）： 有了CSS，我们可以只显示我们需要的图像的一部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
img.home {
    /* 设置该元素大小，超出元素大小的背景图将不会在屏幕中显示 */
    width: 46px;
    height: 44px;
    /* 从left：0和top：0处开始显示 */
    background: url(/images/img_navsprites.gif) 0 0;
}
img.next {
    width: 43px;
    height: 44px;
    background: url(/images/img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img class="home" src="/images/img_trans.gif"><br><br>
<img class="next" src="/images/img_trans.gif">
</body>
</html>

效果

指向原始笔记的链接

渐变

child::渐变

background属性

child::background

关系图谱

反向链接