百見は、一聞にしかず

見てもわからない事は、とりあえず聞いてみよう。

画像の上に文字を重ねたい場合

CentOSのインストールはすんなり終わったんですが、すんなり過ぎてまだまとめている最中です。

なので、今日はタイトルの通り「画像の上に文字を重ねたい場合」についてです。

もう少し詳しく言うと画像の左上に斜めで”New”という文字を見かけることがあるかもしれませんが、それをどうやっているのかを書きます。タグの意味などはグーグルで調べたほうが早いと思いますがざっくり説明します。

まず、完成形は下の通りです。

f:id:lbblue:20170111150115p:plain

左上にNEWという文字があるのが分かると思います。

 

そして、HTMLの部分には

<div class="photo">
    <img src="sample.jpg" />
    <p class="text">NEW</p>
</div>

 

次にCSSの部分には

.photo {
    width:        500px;
    margin:        0;
    padding:    0;
    position:    relative;
    overflow:     hidden;
}
.photo img {
    width:        100%;
}
.text {
    width:        60px;
    font-size:    12px;
    text-align:    center;
    top: 7px;
    left: -17px;
    transform: rotate(-45deg);
    margin:        0;
    padding:    3px;
    color:        #fff;
    background: #d00;
    position:    absolute;
}

 

transform: rotate(-45deg);のところで文字を回転させていて、overflow: hidden;ではみ出た部分を見えなくしています。

そうすることによって投稿してから一週間だけNEWを表示しておく!なんてこともできますね。(PHPなどで制御する部分は省略します。。。)