*このページは web-dou.com のアーカイブです。(2025年 サイト統合)

画像(イメージ)に文字を重ねるCSSサンプル

TOP > HTML・CSSサンプル >画像(イメージ)に文字を重ねるCSSサンプル
X B! FB LINE

画像(イメージ)に文字を重ねるCSSサンプル

通常の画像と文章

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

HTML

1
2
3
4
5
6
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>

文章を画像の上部に重ねる

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.img_box {
    position:relative;
    display:block;
    margin:0;
    padding:0;
}
.img_box img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box a {
    color:white;
}
.img_box img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.img_comment {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}
.img_comment a:hover {
    color:blue;
}

HTML

1
2
3
4
5
6
7
8
<div class="img_box">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>
</div>

文章を画像の下部に重ねる

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.img_box {
    position:relative;
    display:block;
    margin:0;
    padding:0;
}
.img_box img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box a {
    color:white;
}
.img_box img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.img_comment2 {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:1;
    text-align:center;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}
.img_comment2 a:hover {
    color:white;
}

HTML

1
2
3
4
5
6
7
8
<div class="img_box">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>
</div>

+文章を中央寄せにする

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.img_box2 {
    position:relative;
    display:block;
    /* 画像と同じサイズ */
    width:200px;
    height:113px;
    margin:10px;
    padding:0;
    background-color:#000;
}
.img_box2 img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box2 a {
    color:white;
}
.img_box2 img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.img_comment4 {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    margin:0;
    padding:0;
    background-color:#000;
    text-align:center;
    width:200px;
}

HTML

1
2
3
4
5
6
7
8
<div class="img_box2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment4">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>
</div>

+文章に背景をつける

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.img_box2 {
    position:relative;
    display:block;
    /* 画像と同じサイズ */
    width:200px;
    height:113px;
    margin:10px;
    padding:0;
    background-color:#000;
}
.img_box2 img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box2 a {
    color:white;
}
.img_box2 img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.img_comment3 {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:1;
    margin:0;
    padding:5px;
    background-color:#000;
}
.img_comment3 a:hover {
    color:blue;
}

HTML

1
2
3
4
5
6
7
8
<div class="img_box2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>

+文章の背景を半透明にする

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<code>
<p class="mini green">CSS</p>
<pre class="brush: php; first-line: 1 ; toolbar: false;">.img_box2 {
    position:relative;
    display:block;
    /* 画像と同じサイズ */
    width:200px;
    height:113px;
    margin:10px;
    padding:0;
    background-color:#000;
}
.img_box2 img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box2 a {
    color:white;
}
.img_box2 img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.img_comment3 {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:1;
    margin:0;
    padding:5px;
    background-color:#000;
}
.img_comment3 a:hover {
    color:blue;
}
.opa  {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
</pre>
<p class="mini green">HTML</p>
<pre class="brush: php; first-line: 1 ; toolbar: false;"><div class="img_box2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3 opa">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>
</pre>
</code>

+丸みと影をつける

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.img_box2 {
    position:relative;
    display:block;
    /* 画像と同じサイズ */
    width:200px;
    height:113px;
    margin:10px;
    padding:0;
    background-color:#000;
}
.img_box2 img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box2 a {
    color:white;
}
.img_box2 img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.opa  {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.rad1 {
    border-radius:10px;
    overflow:hidden;
}
.shadow2 {
    box-shadow:1px 1px 5px #000;
}

HTML

1
2
3
4
5
6
7
8
<div class="img_box2 rad1 shadow2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3 opa shadow1">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>

+文章を1行にする

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.img_box2 {
    position:relative;
    display:block;
    /* 画像と同じサイズ */
    width:200px;
    height:113px;
    margin:10px;
    padding:0;
    background-color:#000;
}
.img_box2 img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box2 a {
    color:white;
}
.img_box2 img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.shadow2 {
    box-shadow:1px 1px 5px #000;
}
.opa  {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.ell {
    height:1em;
    overflow:hidden;
}

HTML

1
2
3
4
5
6
7
8
<div class="img_box2 shadow2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3 opa ell">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>