css quete.html

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css quete.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Reward</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="container">
                <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
                <p class="name">Gandalf</p>
                <p class="reward">reward <span class="amount">1000</span><br>golden coins</p>
        </div>
    </body>
</html>
.container {
    display: inline-flex;
    float: left;
    width: auto;
    height: auto;
    max-width: 300px;
}

.container img {
    opacity: 0.65;
}

img{
    height: 300px;
    width: 270px;
}

.name {
    font-size: 45px;
    font-family: Arial, sans-serif;
    color:white;
    position: absolute;
    top: 130px;
    left: 60px;
}

.reward {
    font-size: 22px;
    font-family: Arial, sans-serif;
    color: #000000;
    position: absolute;
    top: 0px;
    left: 30px;
    background-color: RGBa(218,218,218, 0.8);
    padding: 5px 50px;
    border-radius: 10px;
}

.amount {
    color: orange;
}

.container:hover img {
    opacity: 1;
}

.container:hover .reward {
    display: none;
}

.container:hover .name {
    font-size: 30px;
    top: 230px;
    left: 85px;
}

以上是关于css quete.html的主要内容，如果未能解决你的问题，请参考以下文章

如何在CSS中调用公用css

css [css：fadeout / fadein] css示例。 #css

css基础 CSS 组合选择符CSS 伪类CSS 伪元素

css 深度提示#css中的css base builder CSS

css基础 CSS 媒体类型CSS 属性 选择器CSS 表单CSS 计数器

什么是css