Question

之前我问了一个类似的问题并且认为它已经解决但实际上并没有完全解决。这一次，我将使用我正在研究的具体示例来查看这个特定代码是否存在问题。

我在CSS中使用桌面：

div.image {
content:url(http://www.masterpiecetransformers.com/images/masterpiece-
transformers.jpg);
}

div.imagea1 {
content:url(http://www.masterpiecetransformers.com/images/news.jpg);
}

div.imagea2 {
content:url(http://www.masterpiecetransformers.com/images/releases.jpg);
}

div.imagea3 {
content:url(http://www.masterpiecetransformers.com/images/design-team-interview-archives.jpg);
}

div.imagea4 {
content:url(http://www.masterpiecetransformers.com/images/reviews.jpg);
}

然后在CSS for mobile中：

div.image {
content:url(http://www.masterpiecetransformers.com/images/masterpiece-
transformers.jpg);
width:100%;
}

div.imagea1 {
content:url(http://www.masterpiecetransformers.com/images/news.jpg);
width:25%;
}

div.imagea2 {
content:url(http://www.masterpiecetransformers.com/images/releases.jpg);
width:25%;
}

div.imagea3 {
content:url(http://www.masterpiecetransformers.com/images/design-team-interview-
archives.jpg);
width:25%;
}

div.imagea4 {
content:url(http://www.masterpiecetransformers.com/images/reviews.jpg);
width:25%;
}

然后在HTML中：

<div class="containertop">

<div class="image">

</div>

</div>

<div class="breadcrumb">

<div class="imagea1">

</div>

<div class="imagea2">

</div>

<div class="imagea3">

</div>

<div class="imagea4">

</div>

</div>

我有一些问题。出于某种原因，在桌面上只显示前2个图像（图像和图像1）。在移动设备上，在我将第一张图像的宽度设置为100％后，开始显示。然而，由于我正在修改代码以尝试使其工作，出现问题，目前没有图像显示在移动设备上。似乎将宽度设置为100％允许图像在移动设备上正确显示（原生图像宽度为900像素，我实际上将其改为1024但我无法想象这与任何事情有关）

我正在以这种方式制作图像，而不是以更传统的方式，因为它似乎允许我指定图像的百分比宽度，这对于在移动设备上获得正确尺寸非常有用。

我可能会遗漏一些非常明显的东西，但我一遍又一遍地查看代码并且无法理解为什么imagea1会在桌面上显示，然后imagea2不会考虑它们似乎以相同的方式编码。

Answer 1

我不知道您遇到的具体问题，但这是我在测试您的代码时注意到的。

图像根本没有出现，但经过一些试验和错误，它神奇地做了。

对于我的测试，问题与div有关。 div是块元素，占据浏览器分辨率的整个宽度。

在某些浏览器上，尝试将图像拉伸到与viewport一样大的图像会使图像崩溃并且根本不渲染。对于图像来说，拥有合适的尺寸，容器和属性非常重要。

在下面的示例中，我为它们设置了固定的宽度（100%对我来说是癌症）和固定的高度（例如200px）。

希望我帮忙！

.image {
content:url(http://www.masterpiecetransformers.com/images/masterpiece-
transformers.jpg);
  width: 50%;
  height: 200px;
}

.imagea1 {
content:url(http://www.masterpiecetransformers.com/images/news.jpg);
  width: 50%;
  height: 200px;
}

.imagea2 {
content:url(http://www.masterpiecetransformers.com/images/releases.jpg);
  width: 50%;
  height: 200px;
}

.imagea3 {
content:url(http://www.masterpiecetransformers.com/images/design-team-interview-archives.jpg);
  width: 50%;
  height: 200px;
}

.imagea4 {
content:url(http://www.masterpiecetransformers.com/images/reviews.jpg);
  width: 50%;
  height: 200px;
}

<div class="containertop">

<div class="image">
</div>

</div>

<div class="imagea1">

</div>

<div class="imagea2">

</div>

<div class="imagea3">

</div>

<div class="imagea4">

</div>

Answer 2

好的，在这里回答我自己的问题，因为我已经设法在Mark的帮助下弄明白了。

我使用的是香草记事本，问题似乎是我使用字符编码ANSI保存了styles.css文件。 ANSI特别导致右括号'}'格式不正确。我用谷歌搜索，几乎在所有情况下都建议使用UTF-8。因此，您希望在HTML的head部分中将样式表声明为UTF-8：

<link href="styles.css" rel="stylesheet" type="text/css; charset=utf-8"/>

我已经完成了这个，但后来使用ANSI已经是一个问题了！然后建议在样式表的第一行将样式表声明为UTF-8，这是代码：

@charset "UTF-8";

然而，对于vanilla Notepad，您还要确保在第一次“另存为”文件时将编码更改为UTF-8，“保存”按钮左侧有一个框...

最后一件事，如果您尝试复制ANSI样式表的内容并随后将其保存为UTF-8，请注意，您仍然希望删除结尾括号'}'并将其替换为新的结尾括号格式化无形地进行着。

content：CSS中的url用于多个图像

2 个答案: