ต่อไป »

[pn000000]

โค๊ดรูปหมายเลข 1 ผมใส่แบบนี้

   background-image:url('head_oragne25.png');
   background-repeat:repeat-x;




แล้วโค๊ดรูปหมายเลข 2 จะใส่ต่อท้ายดังภาพยังไงครับ

[wasantec]

สร้าง class css ขึ้นมาอีกอัน

background-image:url('head_orange25_2.png');
background-repeat: no-repeat;

[ballentertain]

ถ้าจะใช้รูปทำในส่วนนั้น ก็แนะนำเป็น :after และ  content: ครับ
.myclass {
 background-image:url('head_oragne25.png');
 background-repeat:repeat-x;
}
.myclass:after {
content:url('head_oragne25_2.png');
width: px;
height: px;
/*อื่นๆ เพิ่มเติมตามความเหมาะสม*/
}

อ้างอิง
- CSS content Property http://www.w3schools.com/cssref/pr_gen_content.asp
- CSS Selector Reference http://www.w3schools.com/cssref/css_selectors.asp

ถ้าจะใช้ CSS3 ทั้งหมดก็แนะนำเครื่องมือดังนี้ครับ
- พื้นหลังไล่สี http://www.colorzilla.com/gradient-editor/
- ขอบโค้งมน http://border-radius.com/
- เครื่องมือ CSS3 อื่นๆ http://css3generator.com/

[pn000000]

ถ้าจะใช้รูปทำในส่วนนั้น ก็แนะนำเป็น :after และ  content: ครับ
.myclass {
 background-image:url('head_oragne25.png');
 background-repeat:repeat-x;
}
.myclass:after {
content:url('head_oragne25_2.png');
width: px;
height: px;
/*อื่นๆ เพิ่มเติมตามความเหมาะสม*/
}

อ้างอิง
- CSS content Property http://www.w3schools.com/cssref/pr_gen_content.asp
- CSS Selector Reference http://www.w3schools.com/cssref/css_selectors.asp

ถ้าจะใช้ CSS3 ทั้งหมดก็แนะนำเครื่องมือดังนี้ครับ
- พื้นหลังไล่สี http://www.colorzilla.com/gradient-editor/
- ขอบโค้งมน http://border-radius.com/
- เครื่องมือ CSS3 อื่นๆ http://css3generator.com/

ผมใส่แบบนี้ครับ แต่รูปที่ 2 ก็ยังไม่ขึ้น ขึ้นเรียงยาวไปแต่รูปที่ 1
.myclass {
 background-image:url('head_oragne25.png');
 background-repeat:repeat-x;
 width:600px;

}
.myclass:after {
content:url('head_oragne25_2.png');
background-repeat:no-repeat;

}

[lungkao]

ถ้าใช้ css3

โค๊ด:

.myclass {
background: rgb(253,169,45); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkYTkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZkYTkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2U2OTAxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(253,169,45,1) 0%, rgba(253,169,45,1) 48%, rgba(230,144,16,1) 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,169,45,1)), color-stop(48%,rgba(253,169,45,1)), color-stop(89%,rgba(230,144,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda92d', endColorstr='#e69010',GradientType=0 ); /* IE6-8 */

-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
}

[pn000000]

ถ้าใช้ css3

โค๊ด:

.myclass {
background: rgb(253,169,45); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkYTkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZkYTkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2U2OTAxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(253,169,45,1) 0%, rgba(253,169,45,1) 48%, rgba(230,144,16,1) 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,169,45,1)), color-stop(48%,rgba(253,169,45,1)), color-stop(89%,rgba(230,144,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda92d', endColorstr='#e69010',GradientType=0 ); /* IE6-8 */

-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
}

งงครับ

[qwert001]

ถ้าเป็นผม..เอาง่ายๆก็เปลี่ยนรูป head_orange25.png
ให้เป็น

background-image:url('head_oragne25.png') bottom right;
padding-right:25px;

ประมาณนี้ครับ

[sys2528]

ถ้าเป็นผม..เอาง่ายๆก็เปลี่ยนรูป head_orange25.png
ให้เป็น

background-image:url('head_oragne25.png') bottom right;
padding-right:25px;

ประมาณนี้ครับ

ถ้ามีการกำหนดตายตัวว่าต้องสูงและยาวเท่านี้ก็ใช้แบบนี้ได้ครับผม  แต่ถ้ายืดหยุ่นตาม Text ก็ต้องให้ Box ตัวหนังสือเป็น bg รูปหนึ่ง และ ที่โค้งๆ อีกรูปหนึ่งครับ

[qwert001]

ถ้าเป็นผม..เอาง่ายๆก็เปลี่ยนรูป head_orange25.png
ให้เป็น

background-image:url('head_oragne25.png') bottom right;
padding-right:25px;

ประมาณนี้ครับ

ถ้ามีการกำหนดตายตัวว่าต้องสูงและยาวเท่านี้ก็ใช้แบบนี้ได้ครับผม  แต่ถ้ายืดหยุ่นตาม Text ก็ต้องให้ Box ตัวหนังสือเป็น bg รูปหนึ่ง และ ที่โค้งๆ อีกรูปหนึ่งครับ

อันนี้ก็ยืดหยุ่นนะครับ ผมใช้ประจำ แต่ต้องทำรูปให้ยาวๆเผื่อไว้หน่อย
รูปพื้นหลังจะชิดขวาตลอด ดังนั้นไม่ว่าจะยืดหรือหดก็จะเห็นมุมโค้งตลอดครับ
 

[ttong]

ลองแบบนี้ดูครับ

โค๊ด:

<style type="text/css">
.myclass{
	background-image:url('head_oragne25.png');
	background-repeat:repeat-x;
}
.myclass img{
	float:right;
}
.myclass span{
	float:left;
	padding:10px;
}
</style>

<div class="myclass">
<img src="head_orange25_2.png" />
<span>แปลก ทึ่ง ตะลึง</span>
</div>

[MD.18]

จับให้มันโค้งขวาบน น่าจะง่ายกว่า

.title-bg{
color:#151515;
min-width:200px;
min-hight:60px;
text-align:left
padding:10px;
background-image: url('head_oragne25.png')repeat-x left top;
border-top-right-radius:2em;
float:left;
}

  น่าจะประมาณนี้

แนะนำทำรูปแบบ css sprite จะมีผลดีมากกว่าทำรูปออกมาเป็นหลาย ๆ ไฟล์ ครับ โหลดครั้งเดียวเสร็จทั้งเว็บ

[ballentertain]

ถ้าจะใช้รูปทำในส่วนนั้น ก็แนะนำเป็น :after และ  content: ครับ
.myclass {
 background-image:url('head_oragne25.png');
 background-repeat:repeat-x;
}
.myclass:after {
content:url('head_oragne25_2.png');
width: px;
height: px;
/*อื่นๆ เพิ่มเติมตามความเหมาะสม*/
}

อ้างอิง
- CSS content Property http://www.w3schools.com/cssref/pr_gen_content.asp
- CSS Selector Reference http://www.w3schools.com/cssref/css_selectors.asp

ถ้าจะใช้ CSS3 ทั้งหมดก็แนะนำเครื่องมือดังนี้ครับ
- พื้นหลังไล่สี http://www.colorzilla.com/gradient-editor/
- ขอบโค้งมน http://border-radius.com/
- เครื่องมือ CSS3 อื่นๆ http://css3generator.com/

ผมใส่แบบนี้ครับ แต่รูปที่ 2 ก็ยังไม่ขึ้น ขึ้นเรียงยาวไปแต่รูปที่ 1
.myclass {
 background-image:url('head_oragne25.png');
 background-repeat:repeat-x;
 width:600px;

}
.myclass:after {
content:url('head_oragne25_2.png');
background-repeat:no-repeat;

}

จะขึ้นให้ได้ไงละครับ เนื่องจากคุณไม่ได้ระบุ ความกว้าง กับ ความสูง ลงไปเลยครับผม

.myclass:after กำหนด ค่านี้ด้วยครับ
width: ความกว้างของรูปpx;
height: ความสูงของรูปpx;

background-repeat:no-repeat; เอาออกก่อนครับ

[ballentertain]

ถ้าใช้ css3

โค๊ด:

.myclass {
background: rgb(253,169,45); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkYTkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZkYTkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2U2OTAxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(253,169,45,1) 0%, rgba(253,169,45,1) 48%, rgba(230,144,16,1) 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,169,45,1)), color-stop(48%,rgba(253,169,45,1)), color-stop(89%,rgba(230,144,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda92d', endColorstr='#e69010',GradientType=0 ); /* IE6-8 */

-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
}

งงครับ

จากโค้ดข้างต้น ถ้ากำหนด width และ height เข้าไป มันก็จะแสดงพื้นหลังไล่สี ออกมาครับ

ตัวอย่าง

HTML
<div class="myclass">ใส่ข้อมูลตามความต้องการ</div>

CSS
.myclass {
background: rgb(253,169,45);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(253,169,45,1) 0%, rgba(253,169,45,1) 48%, rgba(230,144,16,1) 89%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,169,45,1)), color-stop(48%,rgba(253,169,45,1)), color-stop(89%,rgba(230,144,16,1)));
background: -webkit-linear-gradient(top, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%);
background: -o-linear-gradient(top, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%);
background: -ms-linear-gradient(top, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%);
background: linear-gradient(to bottom, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda92d', endColorstr='#e69010',GradientType=0 );
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
height: 30px;
width: 100%;
}

หมายเหตุ
ต้องขออภัยคุณ lungkao ด้วยนะครับ ที่ผมตอบตัดหน้าคุณไป ผมลืมดูครับ ว่าเป็นคำแนะนำของคุณ ตอนแรกผมคิดว่าเจ้าของกระทู้เขาใส่โค้ดมาแบบนั้นแล้วมันไม่แสดงผลครับ ผมเลยต่อให้ครับ ขอโทษด้วยครับ