เป็นไปได้ไหมที่จะตั้งค่าความโปร่งใสใน CSS3 box-shadow


100

เป็นไปได้ไหมที่จะตั้งค่าความโปร่งใสบนเงาของกล่อง

นี่คือรหัสของฉัน:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

คำตอบ:


192

ฉันคิดว่าrgba()จะทำงานที่นี่ ท้ายที่สุดเบราว์เซอร์รองรับทั้งสองอย่างbox-shadowและrgba()ใกล้เคียงกัน

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>


3
ทำงานให้ฉันและแก้ปัญหาใหญ่ที่เงาที่ใช้สีใช้งานได้กับพื้นหลังที่กำหนดเท่านั้นดังนั้นคุณต้องปรับแต่งใหม่โดยขึ้นอยู่กับสิ่งที่พวกเขาจะทำซึ่งมักจะเป็นไปไม่ได้ (div ที่ครอบคลุมทั้งภาพถ่ายและสีขาว bg ซึ่งในกรณีนี้เงาจะดูซีดที่ด้านบนของภาพ)
jerclarke

@jeremyclarke ฉันประสบปัญหาเดียวกันกับที่ฉันต้องการเงาของปุ่มเพื่อทำงานกับพื้นหลังหลายสีโดยไม่ต้องกำหนดสีเงาที่ไม่ซ้ำกันสำหรับแต่ละพื้นหลัง สีดำใสใช้งานได้เหมือนเงาจริง
Clarus Dignus

3
rgba () ไม่ได้ผลสำหรับฉันถ้าฉันต้องการเปลี่ยนของ chromeinput:-webkit-autofill
Samuel

มันเป็น Chrome เสมอไปใช่ไหม
BoltClock

1
@ คริสเค: ฉันเกรงว่าคุณจะไม่สามารถทำสิ่งนี้แยกจากการประกาศเงากล่องเดิมได้ สิ่งที่ใกล้เคียงที่สุดที่คุณจะได้รับคือตัวแปร rgba () และ CSS แต่นั่นหมายความว่าไม่รองรับสีที่ตั้งชื่อและคุณต้องใช้ตัวแปรกับการประกาศ box-shadow เอง สีพื้นหลังมีข้อ จำกัด ที่คล้ายกันปกคลุมที่นี่ ดูstackoverflow.com/questions/40010597/…
BoltClock
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.