Sass - แปลง Hex เป็น RGBa เพื่อความทึบของพื้นหลัง


213

ฉันมี Sass mixin ต่อไปนี้ซึ่งเป็นการปรับเปลี่ยนครึ่งหนึ่งของตัวอย่าง RGBaอย่างสมบูรณ์:

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

ฉันสมัคร$opacityแล้ว แต่ตอนนี้ฉันติดอยู่กับ$colorส่วนแล้ว สีที่ฉันจะส่งเข้ามาใน mixin นั้นจะเป็น HEX ไม่ใช่ RGB

ตัวอย่างการใช้ของฉันจะเป็น:

element {
    @include background-opacity(#333, .5);
}

ฉันจะใช้ค่า HEX ภายในมิกซ์อินนี้ได้อย่างไร

คำตอบ:


414

RGBA () ฟังก์ชันสามารถยอมรับสีฐานสิบหกเดียวเป็นค่า RGB ทศนิยมดี ตัวอย่างเช่นวิธีนี้ใช้ได้ผล:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

หากคุณต้องการแบ่งสีฐานสิบหกออกเป็นองค์ประกอบ RGB คุณสามารถใช้ฟังก์ชั่นสีแดง () , สีเขียว ()และสีฟ้า ()เพื่อทำสิ่งต่อไปนี้:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

ฉันสาบานว่าฉันลองสิ่งนี้และฟังก์ชั่น r, b, g และมันไม่ทำงาน ฉันใช้สีแบบไดนามิกจากส่วนท้ายของ Drupal ซึ่งอาจมีบางอย่างผิดปกติ ยังเรียงลำดับมันในที่สุดและคำตอบที่ฉันพบหลังจากการวิจัยเพิ่มเติม +1
Rick Donohoe

1
แต่สิ่งที่เทียบเท่าเลขฐานสิบของ # ($ color + $ opacity)? - สิ่งนี้อาจมีประโยชน์ doable?
somedirection

2
เพื่อความรู้ที่ดีที่สุดของฉัน RGBA เพิ่มความทึบซึ่งหมายความว่าคุณสามารถเห็นองค์ประกอบที่อยู่ด้านหลัง ด้วยมาตรฐานhexคุณไม่สามารถทำได้
Richard Peck

ขอบคุณ ไม่เคยคิดที่จะลอง hex บนrgb a!
RayViljoen

2
ดีกว่าที่จะใช้rgba($color, $alpha)เช่นrgba(#000000, 0.6)ผลที่ได้คือเหมือนกันและไม่จำเป็นต้องบูรณาการล้อ ;)
lbartolic

118

มี mixin builtin: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

จำนวนควรอยู่ระหว่าง 0 ถึง 1;

เอกสาร Sass อย่างเป็นทางการ (โมดูล: Sass :: สคริปต์ :: ฟังก์ชั่น)


1
ฉันชอบสิ่งนี้! เหมาะสำหรับการใช้งานเบราว์เซอร์ที่ทันสมัย
Mike Kormendy

16
ตามที่ทราบด้าน: จำนวนเงิน $ คือจำนวนเงินที่จะลบออกไม่ใช่ค่าที่คุณต้องการตั้งค่า
MMachinegun

3
ทำงานได้ดีมากยกเว้นจำนวนที่ดูเหมือนจะเป็นความหมายตรงกันข้ามที่คุณต้องการให้90%โปร่งใสเพื่อให้ได้ผลลัพธ์.1
Patrick Mencias-lewis

แปลกประหลาด ไม่มีใครที่ไม่ได้อ่านเอกสารที่เคยสงสัยว่ามีฟังก์ชั่น "โปร่งใส" มีประโยชน์มากแม้ว่าขอบคุณ!
tobybot

คำตอบที่ดี นี่ควรเป็นคำตอบที่ยอมรับได้ ขอบคุณ $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);ทำงานให้ฉัน
Ryan

34

SASS มีฟังก์ชัน rgba () ในตัวเพื่อประเมินค่า

rgba($color, $alpha)

เช่น

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

ตัวอย่างการใช้ตัวแปรของคุณเอง:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

ขาออก:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

6

คุณสามารถลองใช้วิธีนี้ดีที่สุดคือ ... url ( github )

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

5
คำตอบของคุณดี แต่ดูเหมือนจะซับซ้อนเกินความจำเป็น ฉันเดาว่าเฉดสีแบบโปร่งใสนั้นไม่เกี่ยวข้องกับคำถามของฉัน แต่คุณสามารถอธิบายได้ว่าพื้นหลังแบบโปร่งใสนั้นเกี่ยวกับอะไร? ฉันคิดว่าฉันไม่ต้องการมันถ้าฉันไม่ได้ใช้มิกซ์อินเฉดสีแบบโปร่งใส?
Rick Donohoe

@ RickDonohoe เท่าที่ฉันจำได้ z-index: 1 และพื้นหลังโปร่งใสเป็นทางเลือกสำหรับ IE <9 ฉันคิดว่า m.Eloutafi พูดถึงเรื่องนี้ในชั้นเรียนอื่นเพื่อใช้ในความต้องการอื่น ๆ ดูแถวในคำตอบที่เริ่มต้นด้วย "จาก:" ...
Roman M. Koss

2

หากคุณต้องการผสมสีจากตัวแปรและความโปร่งใสของอัลฟ่าและด้วยโซลูชันที่มีrgba()ฟังก์ชั่นคุณจะได้รับข้อผิดพลาดเช่น

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   
          background-color: rgba(#{$color}, 0.3);
                            ^^^^^^^^^^^^^^^^^^^^

สิ่งนี้อาจมีประโยชน์

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.