(HTML5) 需要使一些图像透明，而另一些则不需要答案

【问题标题】：(HTML5) Need to make some images transparent, and others not(HTML5) 需要使一些图像透明，而另一些则不需要
【发布时间】：2015-01-09 15:14:03
【问题描述】：

我实际上是一个全新的编码员，刚开始使用 HTML（昨天开始），我在一些我似乎不太知道该怎么做的事情上遇到了一些麻烦。我使用 CSS 使主页上的图像透明，但不幸的是，它使所有其他图像也透明，尽管所有其他图像都是不透明的。这是我的 index.html 的源代码

<!DOCTYPE html>
<html>
<head>
<style>
  body {
     background-image: url("bg.png");
     background-color: #cccccc;
}
  h1   {color:green}
  p    {color:blue}
h1 {
    text-align: center;
}
p {
    text-align: center;
}
header {
            position:fixed;
            top:0;
            background-color:#333;
            opacity: 0.4;
            width:100%;
            height:40px;
            padding:20px;
            text-align:center;
        }

        footer {
            width: 100%;
            bottom: 0;
            background-color:#333;
            opacity: 0.4;
            position: fixed;
            text-align:center;
        }
        #main{
            padding-top:100px;
            text-align:center;
        }
img {
    opacity: 0.4;
}
img:hover {
    opacity: 1.4;
}
</style>
</head>
<title>Jordan's Test Site (iCarlos)</title>
<body center>
 <header> Deal with it B)</header>
<div id="main">
 <p><img src="giphy.gif" alt=Deal with it! style="width:500px;height:273px"></p>
 <p>Hello! I am a website. Testing, testing, 1 2 3.</p>
 <p><a href="yep.html"><img src="deal-with-it.png" alt=Clic! style="width:450px;height:80px"></a></p>
 <p><a href="table.html">Click here to go to the table!</a></p>
</div>
<footer>
<p><a href="index.html"><img src="home.png" alt=source style=width:124;height:124></a></p>
</footer>
</body /center>

谢谢你们的帮助，伙计们！

【问题讨论】：

opacity: 1.4 不是有效值。不透明度值范围从 0（透明）到 1（纯色）。
在添加不透明度时更具体img.classname
为图像添加一个类然后给出，以便它只适用于img.classname { opacity: 0.4; }

标签： css html image opacity

【解决方案1】：

最简单的方法是为透明图像定义一个类（您当前的选择器img 将不透明度规则添加到所有图像），然后添加这些规则：

img.transparent {
    opacity: 0.4;
}
img.transparent:hover {
    opacity: 1; // no point in going higher than 1 here
}

然后在 HTML 中，将类添加到您想要透明的那些图像中：

<img src="image.jpg" class="transparent" alt="" />

【讨论】：

2.. 在第 2 次 img 之后
@VitorinoFernandes 谢谢！
非常感谢！简短，甜蜜，切中要害，并且完全有效！谢谢。

【解决方案2】：

您需要选择您的特定图像。

现在，img 选择标签 img 而不是特定图像。您需要选择一个附加属性来指定哪个图像。您可以通过添加 class 属性、id 属性或使用您现有的属性来做到这一点（尽管我通常不建议这样做）：

 img[alt=Clic!] {
   opacity: 0.4;
 }
 img[alt=Clic!]:hover {
   opacity: 1;
 }

【讨论】：

【解决方案3】：

目前，您的目标是 HTML 中的每个 imgtag。

你有两种简单的方法来定位一些图像：

在 HTML 中为您想要透明的图像添加一个类，并在 CSS 中定位该类

示例 HTML：

<img class="transparent" src="..." alt="...">

在 CSS 中：

img.transparent{
    opacity: 0.5; /* Example, set it to whatever you want */
}

您还可以保持 HTML 结构并使用 CSS 更精确地定位您的元素

假设您要更改包含在header 中的img 的不透明度，而不是不包含在header 中的图像的不透明度，您可以这样做：

header img{ 
    opacity: 0.5; /* Example, set it to whatever you want */
}

这是 CSS 中非常基本的内容，我建议您阅读一些教程，所有这些都应该涵盖。

这里有一个很好的初学者教程：http://css-tricks.com/how-css-selectors-work/

【讨论】：

【解决方案4】：

下面是一个示例，说明如何使用 CSS 类定位不同的图像：

img {
  
  opacity: 0.8;
  width:200px;
  height:200px;
  transition: all 0.2s;
  }

img:hover {
  
  opacity: 1;
  }

.transparent {
  
  opacity: 0.2;
  width:200px;
  height:200px;
  transition: all 0.2s;
  }

.transparent:hover {
  
  opacity: 0;
  }

&lt;img src="http://placekitten.com/1000/1000" class="transparent"&gt;&lt;img src="http://placekitten.com/1000/1000" class="transparent"&gt;&lt;img src="http://placekitten.com/1000/1000" class="transparent"&gt;&lt;img src="http://placekitten.com/1000/1000"&gt;&lt;img src="http://placekitten.com/1000/1000"&gt;&lt;img src="http://placekitten.com/1000/1000"&gt;

希望这会有所帮助！

【讨论】：

【解决方案5】：

第一个选项：为图像指定一个 ID（或类，或通过 Josh Burgess 明确说明的 alt 属性进行选择）并添加样式规则以反映其不透明度

HTML

<img src="giphy.gif" id="transparent-image" alt="Deal with it!" style="width:500px;height:273px">

CSS

#transparent-image {opacity: 0.4;}

您也可以使用类。类可以用于文档中的多个元素。 身份证件不应多次使用！护照是为全世界的一个人准备的。同样，ID 仅适用于 HTML 中的一个元素。在您的情况下，使用一个类可能很有用，这样您就可以拥有多个只有一个类的透明项目：

.transparent-image {opacity: 0.4;}

现在，当您将以下 HTML 添加到元素时，它将具有以下不透明度值：

class="transparent-image"

例如：

<img src="giphy.gif" class="transparent-image" alt="Deal with it!" style="width:500px;height:273px">

第二个选项：使用内联样式

<img src="giphy.gif" alt="Deal with it!" style="width:500px;height:273px;opacity:0.4">

第一个选项是最好的。除非涉及比添加的类更小的小块，否则不应使用内联样式。在您的情况下，一起摆脱内联样式并使用样式表。

【讨论】：