float、背景画像の可視性等

はじめに

プログラミング初心者の学習記録です。

• 行ったこと
• つまずいたこと
• 新たな発見　等を書き溜めていきます。

行ったこと

• ポートフォリオの目的と内容の決定
• ラフスケッチ作成
• 各ページ共通部分とトップページの作成

つまずいたこと

• CSS Floatを使用した際、親要素のはみ出してしまう
  →親要素にoverflow: hidden;を指定

• 背景画像の影響で、文字が見にくい　可視性を上げる為、背景画像を暗くしたい

HTML

    <div class="contents-bg">
        <div class="contents">
            <h1>Black Filter</h1>
        </div>
    </div>

CSS

.contents-bg {
    background-image: url(../images/sample-img.jpg);
    background-size: cover;
    background-position: center;
    height: 500px;
}
.contents {
    background-color: rgba(0,0,0,0.6);
    height: 500px;
}