图像的 HTML 问题答案

【问题标题】：HTML Issues with images图像的 HTML 问题
【发布时间】：2016-08-02 23:36:44
【问题描述】：

我已经设置了一个页面，并且我有一个用于团队徽标的 html 代码，一旦您将鼠标悬停在它们上面，就会在其中包含文本。我无法理解的是，当两个图像在页面上有两个不同的链接用于 2 个不同的图像时，为什么这两个图像是相同的。为什么图像不在同一行。一个在左边，一个在中间。最后，我如何在其中添加一个链接。下面是网页和代码。

点击您希望管理的团队并继续您的赞助协议！

.pic{ 宽度:350px;高度：220px；背景：url(http://oi67.tinypic.com/8xj85v.jpg) 不重复； } .text{ 宽度：290px;高度：160px；背景：#303030;不透明度：0； } .pic:hover .text { 不透明度:0.8;文本对齐：对齐；颜色：#fff;字体大小：10.5px；字体粗细：500； font-family:"Arial", Times, serif;填充：30px； } Scuderia Ferrari 是目前一级方程式比赛中最成功和最古老的参赛车队。他们的总部设在意大利马拉内罗。

该团队成立于 1929 年，在运营阿尔法罗密欧之后于 1947 年开始制造自己的汽车。他们是 1950 年首届世界锦标赛的一部分。

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

.pic{ 宽度:350px;高度：220px；背景：url(http://oi67.tinypic.com/2vjtz5u.jpg) 不重复； } .text{ 宽度：290px;高度：160px；背景：#303030;不透明度：0； } .pic:hover .text { 不透明度:0.8;文本对齐：对齐；颜色：#fff;字体大小：10.5px；字体粗细：500； font-family:"Arial", Times, serif;填充：30px； } Mercedes AMG Petronas 一级方程式车队，前身为 Mercedes GP Petronas F1 Team，是一支一级方程式赛车队，总部位于英国布拉克利，使用德国执照。梅赛德斯-奔驰在 1954 年和 1955 年期间参加了战前的欧洲锦标赛，并曾短暂参加过一级方程式赛车。

梅赛德斯-奔驰在购买了 Brawn 的少数股权 (45.1%) 后，在 2010 赛季重返一级方程式赛车GP 团队，此后成为多个承包商的赢家，在涡轮增压时代拥有卓越的包装。

【问题讨论】：

xciteracingleague.com/pages/Teammanagement

标签： html image xenforo

【解决方案1】：

1) 同一张图片：

主要问题是您的 CSS 缺乏特异性。 .pic 定义了两次——首先是在最外层的<left> 标记内的内联<style> 标记中，然后是.pic DIV；子 <center> 标记中的第二个，后跟一个内联 <style> 标记。如果您检查 .pic DIV(s)，您会注意到第二个 CSS .pic 声明踩在前一个声明之上。

解决这个问题：

将所有 CSS 移动到一个加载到 HTML <head> 标记中的文件中。
添加特异性；几个选项供您选择：i>

A) 在标签名中添加特异性

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

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

B) 使用额外的类名添加特异性 .pic.first { 背景图片：网址（A）； }

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

2) 不在同一行：

解决这个问题：

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

3) 添加链接：

解决这个问题：

只需将每组 .img 和 .text DIV 包装在 <a href= ...> ... </a> 锚标记中

【讨论】：