gpt4 book ai didi

html - 在 css 中尝试 clip 属性

转载 作者:太空宇宙 更新时间:2023-11-04 03:40:58 25 4
gpt4 key购买 nike

我正在试验 css 中的 clip 属性。这里在一个无序列表中将有四个剪切图像。第一行中的前两个,第二行中的第二个。但是图像不可见。为什么会这样?如何修复? jsfiddle

<html>
<head>
<style>
body{
overflow:hidden;
}
ul{
width:200px;
height:200px;
display:table;
}
li{
float:left;
width:100px;
height:100px;
position:relative;
}
li img{
position:absolute;
clip:rect(100px,200px,200px,300px);
}

</style>
</head>
<body>
<ul>
<li><img src="cat1.jpg" ></li>
<li><img src="cat2.jpg"></li>
<li><img src="cat3.jpg"></li>
<li><img src="cat4.jpg" ></li>
</ul>
</body>
</html>

最佳答案

去掉图片的绝对位置,加上overflow: hidden;至今li元素:这是更新的fiddle

编辑:

您不应该使用剪辑属性来实现您的需要。一种方法是给出 overflow: hidden给家长li元素,保留 position: absoluteimg并给它适当的topleft坐标,而不是剪辑坐标。所以我们使用的效果是使用父级的尺寸 li元素来屏蔽图像中不应该可见的部分并将图像移动到正确的坐标。

这是更新的 fiddle :

关于html - 在 css 中尝试 clip 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24908201/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com