เป็นไปได้ไหมที่จะทำให้<div>องค์ประกอบมีภาพพื้นหลังและถ้าเป็นเช่นนั้นฉันจะทำสิ่งนี้ได้อย่างไร
เป็นไปได้ไหมที่จะทำให้<div>องค์ประกอบมีภาพพื้นหลังและถ้าเป็นเช่นนั้นฉันจะทำสิ่งนี้ได้อย่างไร
คำตอบ:
คุณหมายถึงอะไร
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>คุณสามารถทำได้โดยใช้ CSS ของbackgroundpropieties มีหลายวิธีที่จะทำ:
HTML:
<div id="div-with-bg"></div>
CSS :
#div-with-bg
{
background: color url('path') others;
}HTML:
<div class="div-with-bg"></div>
CSS :
.div-with-bg
{
background: color url('path') others;
}HTML:
<div style="background: color url('path')"></div>
ที่ไหน :
background คุณสมบัติ CSS เป็นการเชื่อมต่อของ prop-2 พื้นหลัง xxx ทั้งหมดในไวยากรณ์นั้น
พื้นหลัง : สี พื้นหลัง สีพื้นหลังภาพพื้นหลังซ้ำ พื้นหลังที่แนบมา พื้นหลังตำแหน่ง ;
ที่มา: w3schools
ใช่ :
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>ใช้สไตล์นี้เพื่อรับภาพพื้นหลังกึ่งกลางโดยไม่ต้องทำซ้ำ
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}ใน HTML ให้ตั้งค่าลักษณะนี้สำหรับ div ของคุณ:
<div class="bgImgCenter"></div>ใช้เหมือน ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>คุณสามารถเพิ่มคุณสมบัติ img src ด้วย id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>และในไฟล์ CSS ของคุณ (พื้นหลังยืด):
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}<div class="foo">Foo Bar</div>และในไฟล์ CSS ของคุณ:
.foo {
background-image: url("images/foo.png");
}<div id="imgg">Example to have Background Image</div>เราจำเป็นต้องเพิ่มเนื้อหาด้านล่างในแท็กสไตล์:
.imgg(
background-image: url('C:\Users\ajai\Desktop\10.jpg');
)ส่วนใหญ่วิธีการเช่นเดียวกับการตั้งค่าร่างกายทั้งหมด
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>