หน้า 1 จากทั้งหมด 1

สอบถามเกี่ยวกับคำสั่ง span ทำให้ใช้ background ต่างกันได้ครั

โพสต์แล้ว: 07 ก.ย. 2013, 12:03
โดย bew165
สวัสดีครับ ขอถามเรื่อง css หน่อยครับ
ถ้าผมจะเปลี่ยน background ของ box-heading โดยเพิ่ม background สีเขียวเข้าไปใต้ข้อความ "ทดสอบ FreeBox"
ไม่ทราบว่าจะต้องแก้ หรือเพิ่มอะไรยังไงครับ ตอนนี้ผมทำได้แบบภาพที่ 1 ครับ
โดยใช้ background เป็นภาพจุด ๆ เรียง ๆ ต่อ ๆ กัน แต่ยังไม่สามารถเพิ่มสี่เหลี่ยมสีเขียวแบบภาพที่สองได้ครับ

รูปภาพ

โค้ดของภาพที่ 1 ครับ
.box .box-heading {
background: url('../image/bg_title.png') repeat left top scroll;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #FFF;
margin-bottom:1px
}

อันนี้เป็นโค้ดของเว็บตัวอย่างครับ
.box-heading h3 {
background:url(../image/default/bg_title.png) repeat left top scroll;
margin-bottom:1px
}

.box-heading h3 span {
background: #45a5a5;
color: #fff;
line-height: 29px;
display: inline-block;
zoom: 1;
*display: inline;
font-weight: 700;
padding: 0 25px 0 17px;
}

ลองใช้คำสั่ง span ตามตัวอย่างแล้วแต่มันก็ไม่เพิ่มให้ครับ
รบกวนช่วยหน่อยนะครับ
ขอบคุณครับ

Re: สอบถามเกี่ยวกับคำสั่ง span ทำให้ใช้ background ต่างกันได้ครั

โพสต์แล้ว: 03 มิ.ย. 2016, 01:56
โดย wacom
ในสไตล์ กำ ใส่สีเขียวลงไป และคำสั่ง background-position: ลงไป จบเยย

.box .box-heading {
background: #สีเขียว url('../image/bg_title.png') repeat left top scroll;
ิbackground-position: 200px;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #FFF;
margin-bottom:1px
}

Re: สอบถามเกี่ยวกับคำสั่ง span ทำให้ใช้ background ต่างกันได้ครั

โพสต์แล้ว: 30 ส.ค. 2016, 17:54
โดย rockmanx5
รอเก็บความรู้ด้วยนะครับ :-D