8
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

CSS で背景画像を暗くする + マウスオーバーで明るくする

まずは背景画像をつける

スクリーンショット 2016-10-31 15.28.34.png

htmlコード

<a href="#">
    <div class="menu">
        <div class="box">
            ここに文章があったり。
        </div>
    </div>
</a>

まずはCSSで背景を暗くする

CSSコード

.menu {
    height: 100px;
    background: url(fruits.jpg) center no-repeat;
    background-size: cover; 

    position: relative;
    height:100%;
}

.box {
    position: absolute;
    width: 100%;
    top: 45%;

    text-align: center;
    color: #FFF;
}

背景画像を暗くする

スクリーンショット 2016-10-31 15.31.43.png

背景を置いた要素にCSSで暗くした要素を追加するイメージ

.menu::before{
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

マウスオーバしたら明るくする

スクリーンショット 2016-10-31 15.37.56.png

挿入したCSSを明るくするだけ

a:hover .menu::before{
    background-color: rgba(0,0,0,0);
}

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
8
Help us understand the problem. What are the problem?