ทำไมฉันไม่สามารถใช้ภาพพื้นหลังและสีร่วมกันได้

สิ่งที่ฉันพยายามทำคือการแสดงทั้งสองbackground-colorและbackground-imageครึ่งหนึ่งของฉันdivจะครอบคลุมภาพพื้นหลังเงาที่เหมาะสมและส่วนที่เหลืออีกส่วนจะครอบคลุมสีพื้นหลัง

แต่เมื่อฉันใช้background-imageสีจะหายไป

เป็นไปได้อย่างสมบูรณ์ที่จะใช้ทั้งสีและภาพเป็นพื้นหลังสำหรับองค์ประกอบ

คุณตั้งค่าbackground-colorและbackground-imageสไตล์ หากรูปภาพมีขนาดเล็กกว่าองค์ประกอบคุณต้องใช้background-positionสไตล์เพื่อวางไว้ทางด้านขวาและป้องกันไม่ให้เกิดการซ้ำและครอบคลุมพื้นหลังทั้งหมดที่คุณใช้background-repeatสไตล์:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

หรือใช้รูปแบบคอมโพสิตbackground:

background: green url(images/shadow.gif) right no-repeat;

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

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

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

จะย้อมสีภาพคุณสามารถใช้ CSS3 กองภาพและbackground linear-gradientในตัวอย่างด้านล่างฉันใช้ a linear-gradientโดยไม่มีการไล่ระดับสีจริง เบราว์เซอร์ถือว่าการไล่ระดับสีเป็นภาพ (ฉันคิดว่ามันจะสร้างบิตแมปและวางซ้อนมัน) และทำให้เป็นภาพซ้อนกันหลายภาพ

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

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

เอกสารยอดเยี่ยมโดย Mozilla ที่นี่:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

เครื่องมือสำหรับสร้างการไล่ระดับสี:

http://www.colorzilla.com/gradient-editor/

หมายเหตุ - ไม่ทำงานใน IE11! ฉันจะโพสต์การอัปเดตเมื่อฉันพบว่าทำไมเพราะมันควรจะเป็น

ใช้

background:red url(../images/samle.jpg) no-repeat left top;

และเพื่อเพิ่มคำตอบนี้ให้แน่ใจว่าภาพนั้นมีพื้นหลังโปร่งใส

นี่คือตัวอย่างของการใช้background-imageและbackground-colorร่วมกัน:

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

จริงๆแล้วมีวิธีที่คุณสามารถใช้สีพื้นหลังกับภาพพื้นหลัง ในกรณีนี้ส่วนพื้นหลังจะเต็มไปด้วยสีที่ระบุแทนสีขาว / โปร่งใส

เพื่อให้บรรลุเป้าหมายคุณต้องตั้งค่าbackgroundคุณสมบัติดังนี้:

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

หมายเหตุจุลภาคและรหัสสีหลังจากno-repeat; ชุดนี้สีพื้นหลังที่คุณต้องการ

ฉันค้นพบสิ่งนี้ในวิดีโอ YouTube นี้แต่ฉันไม่ได้มีส่วนเกี่ยวข้องกับช่องหรือวิดีโอดังกล่าวไม่ว่าด้วยวิธีใด

ทำให้ครึ่งหนึ่งของภาพโปร่งใสเพื่อให้เห็นสีพื้นหลัง

อย่างอื่นก็แค่เพิ่ม div อีกตัวโดยรับค่าคอนเทนเนอร์ div ขึ้น 50% แล้วลอยมันไปทางซ้ายหรือขวา จากนั้นนำรูปภาพหรือสีไปใช้

Gecko มีข้อผิดพลาดแปลก ๆ ที่การตั้งค่าbackground-colorสำหรับhtmlตัวเลือกจะปกปิดbackground-imageองค์ประกอบของร่างกายแม้ว่าbodyองค์ประกอบที่มีผลจะมีดัชนี z มากกว่าและคุณควรจะเห็นร่างกายbackground-imageพร้อมกับการhtml background-colorใช้ตรรกะอย่างง่าย

ตุ๊กแกบั๊ก

หลีกเลี่ยงสิ่งต่อไปนี้ ...

html {background-color: #fff;}
body {background-image: url(example.png);}

หลีกเลี่ยง

body {background-color: #fff; background-image: url(example.png);}

สวัสดีทุกคนฉันลองอีกวิธีในการรวมภาพพื้นหลังและสีพื้นหลังเข้าด้วยกัน:

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

กรุณาแจ้งให้เราทราบว่ามันทำงานให้คุณขอบคุณ

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;