de-vraag
Lebih
Question

cara menampilkan teks di atas gambar di Bootstrap 3.1

Saya ingin menambahkan teks yang ditampilkan di atas gambar.

Pada dasarnya, seperti inilah kode saya:

<div class="ek-background">
<div class="row">
<section id="container">
    <div class="container col-sm-4 col-sm-offset-2">
    <div class="pull-right">
        <h1>TITLE HERE</h1>
            <h2>Let us build your preview for free</h2>
    </div>    
        <img src="img/img/flow-1.png" class="align-center img-responsive">
            <div class="col">
                <div class="col-sm-4">
                    <p>this is a test</p>
    </div>
</div>
</div>

Saya tidak dapat mengatur agar "this is a test" ke bagian gambar yang diusulkan.

Saya ingin menggunakan parameter bootstrap.min.css untuk menjaga semuanya tetap konsisten. Juga, karena ini akan menjadi situs web desain responsif, saya ingin teks menjadi responsif dengan gambar sehingga tidak kehilangan posisinya

Jika ada yang bisa membantu, itu akan sangat bagus :)

Jack Bonneman
Jack Bonneman
Pertanyaan edit 2 Maret 2014 в 6:07
Pemrograman
css3
html
twitter-bootstrap

Saya dapat menyarankan cara untuk mengatasi pertanyaan tersebut: Anda dapat menggunakan carousel dengan satu item, karena Anda dapat menyisipkan teks pada gambar carousel berkat caption:

<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
        <img src="img/yourimage.png" alt="" class="img-responsive">
           <div class="carousel-caption">
           Insert your text here !
           </div>
        </div>
    </div>
</div>
dda
dda
Jawaban edit 27 Juli 2014 в 9:29
50

Anda perlu menempelkan css tambahan untuk memberi kami gambaran tentang apa yang Anda hadapi sebenarnya, tetapi inilah 2 sen saya:

  1. Mulailah dengan menempatkan gambar dan teks dalam sesuatu yang akan memuat keduanya:
<div class="imageAndText">
    <img src="img/img/flow-1.png" class="align-center img-responsive">
    <div class="col">
        <div class="col-sm-4">
            <p>this is a test</p>
        </div>
    </div>
</div>

(Hati-hati, kode asli Anda memiliki tambahan

)

  1. Tambahkan pemosisian absolut + indeks-z:
.imageAndText {position: relative;} 
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

Berikut's ilustrasi jsFiddle:

15

Saya rasa hal ini tidak mungkin dilakukan dengan menggunakan kelas bootstrap. Anda bisa melakukan hal seperti ini dengan menambahkan thumbnail ke gambar dan thumbnail_legend ke div next.

.thumbnail_legend {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    top:0;
    left:0;
    position: absolute;
}

.thumbnail {
    position:relative;
}

dari: https://stackoverflow.com/questions/18631530/text-overlay-on-image

Community
Community
Jawaban edit 23 Mei 2017 в 12:10
0
Related communities 5
HTML dan CSS Indonesia
4 118 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
306 pengguna
Official Website : www.pemweb.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
HTML INDONESIA
109 pengguna
PHP HTML Indonesia
59 pengguna
~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^
Css Indonesia
19 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you