Question

我实际上是一个全新的编码器，只是从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>

感谢您的帮助，伙计们！

Answer 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="" />

Answer 2

您需要选择特定的图像。

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

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

Answer 3

第一个选项：为图片提供一个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！护照适用于整个世界的一个人。同样，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">

第一种选择是最好的。不应使用内联样式，除非它涉及小于添加的类的小块。在您的情况下，一起删除内联样式并使用样式表。

Answer 4

目前，您正在定位HTML中的每个img代码。

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

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

示例HTML：

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

在CSS中：

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

您还可以保留HTML结构并使用CSS

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

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

这在CSS中是非常基础的，我建议您阅读一些教程，所有这些都应该包含在内。

这是一个适合初学者的好教程：http://css-tricks.com/how-css-selectors-work/

Answer 5

以下是如何使用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;
  }

<img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000">

希望这有帮助！

（HTML5）需要使一些图像透明，而其他图像则不透明

5 个答案: