如何让我的英雄形象在CSS点击？

我目前正在学习网络开发，并且正在练习我的html和css。我创建了一个页面，其中div通过CSS彼此叠加。做到这一点，我学会了我可以把背景图像放在CSS中。这是我的英雄形象的原型。 enter image description here 如何让我的英雄形象在CSS点击？

我希望左边的3瓶可点击。我想每个瓶子点击后带我去一个div。那可能吗？

在此先感谢

.section { 
 
    height: 100%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
} 
 

 
.secOne { 
 
    background-image: url("../img/finbluehero.jpg"); 
 
} 
 

 
.sub_sectionOne { 
 
    height: 50%; 
 
    background-color: #000B29; 
 
} 
 

 
.secTwo { 
 
    background-image: url("../img/finredhero.jpg"); 
 
} 
 

 
.sub_sectionTwo { 
 
    height: 50%; 
 
    background-color: #D70026; 
 
} 
 

 
.secThree { 
 
    background-image: url("../img/finyellowhero.jpg"); 
 
} 
 

 
.sub_sectionThree { 
 
    height: 50%; 
 
    background-color: #edb83d; 
 
} 
 

 
.footer { 
 
    height: 100px; 
 
    background-color: #f8f5f2; 
 
}

<div class="section"> 
 
    <div class="section secOne"></div> 
 
    <div class="sub_sectionOne"></div> 
 
    <div class="section secTwo"></div> 
 
    <div class="sub_sectionTwo"></div> 
 
    <div class="section secThree"></div> 
 
    <div class="sub_sectionThree"></div> 
 
    <div class="footer"></div> 
 
</div>

来源

2017-06-02 noelfabro

没有解决投递工作？ – TheDarkKnight

在这里你去：

您可以通过包装div与anchor标签包含你的形象做到这一点很容易地。 href属性可以设置为您要重定向到的链接。

.section { 
 
    height: 100%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
} 
 

 
.secOne { 
 
    background-image: url("../img/finbluehero.jpg"); 
 
} 
 

 
.sub_sectionOne { 
 
    height: 50%; 
 
    background-color: #000B29; 
 
} 
 

 
.secTwo { 
 
    background-image: url("../img/finredhero.jpg"); 
 
} 
 

 
.sub_sectionTwo { 
 
    height: 50%; 
 
    background-color: #D70026; 
 
} 
 

 
.secThree { 
 
    background-image: url("../img/finyellowhero.jpg"); 
 
} 
 

 
.sub_sectionThree { 
 
    height: 50%; 
 
    background-color: #edb83d; 
 
} 
 

 
.footer { 
 
    height: 100px; 
 
    background-color: #f8f5f2; 
 
}

<div class="section"> 
 
    <a href="link_to_wherever"> 
 
    <div class="section secOne"></div> 
 
    </a> 
 
    <div class="sub_sectionOne"></div> 
 
    <a href="link_to_wherever"> 
 
    <div class="section secTwo"></div> 
 
    </a> 
 
    <div class="sub_sectionTwo"></div> 
 
    <a href="link_to_wherever"> 
 
    <div class="section secThree"></div> 
 
    </a> 
 
    <div class="sub_sectionThree"></div> 
 
    <div class="footer"></div> 
 
</div>

来源

2017-06-02 06:15:41 TheDarkKnight

检查代码片段，它只显示为背景颜色 – Swellar

@Swellar是因为'image'位于作者的本地机器上。：/ – TheDarkKnight

至少提供一个更好的结果的网页图像。事实上，它看起来像什么也没做 – Swellar

如何让我的英雄形象在CSS点击？

回答

相关问题