masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 背景图片文字布局问题_html/css_WEB-ITnose

背景图片文字布局问题_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:36:08
asal
939 orang telah melayarinya


这个效果的代码： 

<div style=" background:url(图片路径); background-size:100% 100%;width:238px; height:159px; vertical-align:text-bottom;">                                        <div style="background:#757575; filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; height:30; line-height:30px;">                                            测试案例                                        </div>                                	</div>
Salin selepas log masuk

现在要实现成下面这图片的效果：


回复讨论(解决方案)

就是把上面这条换来下面，我用了vertical-align:text-bottom;  但没有效果


                                        

                                            测试案例
                                        

                                    
Label berkaitan：
背景图片文字布局问题
sumber：php.cn
Artikel sebelumnya：Html display inline-block 问题_html/css_WEB-ITnose Artikel seterusnya：css样式之背景图片_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2190
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2338
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1963
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1849
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1904
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan