Question

我已经设置了一个页面，并且我有一个用于团队徽标的html代码，一旦将鼠标悬停在它们上面就会显示文本。我不能得到的是，当两个不同的图像在页面上有两个不同的链接时，两个图像是相同的。为什么图像不在同一条线上。一个在左边，一个在中间。最后我将如何添加一个链接。以下是网页和代码。

点击您要管理的团队并继续进行赞助协议！

.pic {width：350px;高度：220px; background：url（http://oi67.tinypic.com/8xj85v.jpg）no-repeat; } .text {width：290px;高度：160像素;背景：＃303030;不透明度：0; } .pic：hover .text {opacity：0.8;文本对齐：理由;颜色：#FFF;字体大小：10.5px;字体重量：500; font-family：“Arial”，Times，serif;填充：30像素;法拉利车队是一级方程式赛车中最成功，最古老的竞争车队。他们的总部设在意大利的马拉内罗。

成立于1929年，该团队在经营Alfa Romeos之后于1947年开始制造自己的汽车。他们是1950年首届世界锦标赛的一部分。

法拉利在1952年，1953年，1956年，1958年，1961年，1964年，1975年，1977年，1979年，2000年，2001年，2002年，2003年，2004年和2007年赢得了车手冠军十五次。他们赢得了车队冠军（1958年成立）十六次，1961年，1964年，1975年，1976年，1977年，1979年，1982年，1983年，1999年，2000年，2001年，2002年，2003年，2004年，2007年和2008年。

.pic {width：350px;高度：220px; background：url（http://oi67.tinypic.com/2vjtz5u.jpg）no-repeat; } .text {width：290px;高度：160像素;背景：＃303030;不透明度：0; } .pic：hover .text {opacity：0.8;文本对齐：理由;颜色：#FFF;字体大小：10.5px;字体重量：500; font-family：“Arial”，Times，serif;填充：30像素; } Mercedes AMG Petronas一级方程式车队，以前是Mercedes GP Petronas F1车队，是一支一级方程式赛车队，总部位于英国布拉克利，使用德国驾驶执照。 1954年和1955年，梅赛德斯参与了战前的欧洲锦标赛和一级方程式赛车。

梅赛德斯 - 奔驰在购买少数股权（45.1％）后回归F1赛季Brawn GP团队从此成为多个承包商的赢家，在涡轮增压时代拥有一流的包装。

Answer 1

1）相同图片：

主要问题是CSS缺乏特异性。 .pic定义了两次 - 首先在最外面的<style>标记中的内联<left>标记中，后跟.pic DIV;子<center>标记中的第二个标记，后面跟一个内联<style>标记。如果检查.pic DIV，您会注意到第二个CSS .pic声明会对前一个声明进行踩踏。

解决此问题：

将所有CSS移动到HTML <head>标记中加载的一个文件中。
添加特异性;一些选择：

A）使用标记名称添加特异性

left > .pic {
    background-image: url(A);
}

center > .pic {
    background-image: url(B);
}

B）使用其他类名添加特异性 .pic.first { background-image：url（A）; }

.pic.second {
    background-image: url(A);
}

2）不在同一行：

解决此问题：

<left>和<center>标记是块级元素 - 因此您可以将CSS中的标记定义为left, center { display: inline-block; }
删除它们之间的<br>

3）添加一个链接：

解决此问题：

只需在.img锚标记

.text

<a href= ...> ... </a>

HTML图像问题

1 个答案:

1）相同图片：

2）不在同一行：

3）添加一个链接：