gpt4 book ai didi

css - 使用 CSS Div 放置图像切片

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

现在我的许多设计都使用带有绝对定位 DIV 的切片图形。

<style>
#Slice-01 {
position: absolute;
left:0; top:0;
width:214px; height:38px;
}
</style>

<body>
<div id="Slice-01">
<img src="/slices/Slice_01.jpg" width="214" height="38" alt="" border="0" />
</div>
</body>

我见过另一种方法,其中图像是 DIV 的背景而不是 DIV 内的对象...

<style>
#Slice-01 {
position: absolute;
left:0; top:0;
width:214px; height:38px;
background-image: url(/slices/Slice_01.jpg);
background-repeat: no-repeat;
}
</style>

<body>
<div id="Slice-01"></div>
</body>

我能看到的唯一实际区别是,在第一个示例中可以将图像拖出浏览器窗口,但当它是背景图像时则不能。

问题:

  1. 更普遍接受的方法是什么?为什么?
  2. 每种方法的优缺点是什么?

谢谢!

最佳答案

1) 对我来说,第二种更具语义,因此是一种更好的方法

2)图像方法的优点:

  • 真的没有

缺点:

  • 代码拥挤,可维护性差

CSS 的优点:

  • 语义
  • 易于维护

缺点:

  • 没有

关于css - 使用 CSS Div 放置图像切片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5284743/

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