-1

我当然不是 CSS 专家，但我正在解决一个问题，我想让图像的复制对用户来说稍微有点负担。当然，它们仍然可以很容易地被检索到，但这使得您不能只是将它们拖放到桌面上。基本上，我有一堆这样的标记：

<img width="400" src="my image.png" class="foo" alt="foo">

相反，我决定将其放入背景图像并将元素更改为 div：

<div width="400" class="foo">

我遇到的问题是图像的宽度固定，但高度可变。当我使用 img 标签时，这非常有效。当我使用 div 标签时，它没有相同的行为。相反，CSS 要求我强制使用 height 属性来显示任何内容：

这不起作用

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  /* height: 200px; */
}

这种排序会：

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  height: 200px; 
}

问题是图像的高度都是可变的，正如我之前提到的。因此，如果我对尺寸进行硬编码，它会一遍又一遍地平铺。该容器可以是超过 5,000 个图像的占位符，因此手动设置它是行不通的。如果我能让这个 div 的行为与 img 标签完全一样，那么问题就解决了。

4

4 回答 4

2

如果您只是想阻止人们单击和拖放，我会说将每个都img放入它自己div的position: relative. 在具有以下样式的div相对内部添加另一个：div

div.img_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 9999; /* or anything higher than your img's z-index */
}

这将用透明的div.

这样图像（这是您的内容的一部分）在 html 中的语法仍然是正确的。

每个人都说他们已经通过访问该站点将图像下载到他们的计算机上当然是正确的。

于 2012-07-06T20:44:00.463 回答
1

如果您试图阻止用户轻松地重用您的内容，一些好的方法是： 1. 使用分辨率较低的图像来限制重用潜力 2. 给图像加水印 3. 在图像精灵中结合两者。

破解它只会是丑陋、无效且难以维护的。

于 2012-07-06T20:40:32.800 回答
0

你可以用 CSS 做的唯一一件事就是添加一个适用于所有图像的高度。因此，如果您的图像高度范围为 200-250 像素，请将 div 设置为 250 像素。否则，您将需要 javascript 或服务器端脚本来确定图像的高度并设置 CSS。

于 2012-07-06T20:37:45.410 回答
0

您只是在设置 div 的背景，而不是在 div 中添加图像。div 可以调整为它不会调整为背景图像的大小。只需使用标签。

于 2012-07-06T20:33:48.523 回答