2013-07-19 44 views
34

Blog içeren bir müşteri için böyle bir şey yapmaya çalışıyorum. CSS kullanarak şeffaf kenarlık nasıl oluşturulur?

http://i.stack.imgur.com/4h31s.png

O yarı saydam sınır istedik. Bunun sadece bir arka plan yapmakla mümkün olduğunu biliyorum. Ancak afişler için bu tür css tekniğinin arkasındaki mantığı/kodu bulamıyorum. Birileri bunun nasıl yapıldığını biliyor mu? O bakış, çünkü o yardımcı bir çok olurdu Eğer şeffaf/opak anlamına Eğer

border: 5px solid transparent; 

kullanabilirsiniz daha tamamen şeffaf istiyorum Eh eğer müvekkilim en bloguna için başarmak isteyen ....

+0

Olası kopya: http://stackoverflow.com/questions/4062001/css3-border-opacity – showdev

+1

Bunu beğendiniz mi? http://jsfiddle.net/6qJcc/1/ – defaultNINJA

cevap

56

, sen burada

border: 5px solid rgba(255, 255, 255, .5); 

kullanabilirsiniz daha a sen, 0-1 ölçeklendirebiliyoruz alfa anlamına gelir.

Ayrıca bazı siz de aynı işi yapar opacity kullanmayı önerebilir, tek fark, evet bazı iş ya vardır ama rgbaopacity kullanarak daha iyi görünüyor, çok opak alma alt öğeleri sonuçlanacaktır olduğunu. Eski tarayıcılar rgba tanımıyor, onlar sizin elemana hex renk uygulanır, böylece bu

eski tarayıcılar için, her zaman, geri # (onaltılık) kullanarak arka plan rengini tıpkı bir düşüş beyan ederim.

Demo

Demo 2 (yerine background-image bir img etiketi ile)

Demo 3

body { 
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg); 
} 

div.wrap { 
    border: 5px solid #fff; /* Fall back, not used in fiddle */ 
    border: 5px solid rgba(255, 255, 255, .5); 
    height: 400px; 
    width: 400px; 
    margin: 50px; 
    border-radius: 50%; 
} 

div.inner { 
    background: #fff; /* Fall back, not used in fiddle */ 
    background: rgba(255, 255, 255, .5); 
    height: 380px; 
    width: 380px; 
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */ 
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
         manually calculated*/ 
} 

Not (Demo 3 için) (iç içe div için arka plan görüntüsü ile): Resim, yüksekliğe ve genişliğine göre ölçeklendirilecektir; Ölçek oranını kırmayın.

1

kullanımı rgba (alpha transparency RGB) kullanılarak

border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity 

alpha transparency değişken (% şeffaf 100 = opaklık% 0) ve 1 (100 opaklık şeffaf =% 0)

+0

"Background-clip: padding-box;" ayrı bir sınır istiyorsan. Bu css özelliği olmadan arka plan rengi tüm div'u dolduracak, kenarlığınız arka plan rengiyle yığılacaktır. – Georgio

9

0 ila :before sözde eleman,
CSS3 en border-radius,
ve bazı şeffaflık olduğunu Oldukça kolay:

LIVE DEMO

enter image description here

<div class="circle"></div> 

CSS:

.circle, .circle:before{ 
    position:absolute; 
    border-radius:150px; 
} 
.circle{ 
    width:200px; 
    height:200px; 
    z-index:0; 
    margin:11%; 
    padding:40px; 
    background: hsla(0, 100%, 100%, 0.6); 
} 
.circle:before{ 
    content:''; 
    display:block; 
    z-index:-1; 
    width:200px; 
    height:200px; 

    padding:44px; 
    border: 6px solid hsla(0, 100%, 100%, 0.6); 
    /* 4px more padding + 6px border = 10 so... */ 
    top:-10px; 
    left:-10px; 
} 

:before Tamam (sadece yapmak gerekir bizim .circle başka elemana bağlanır, blok , mutlak, vb ...) şeffaf ve kenarlık opaklığı ile oynamak.

10

border-style: double'u background-clip: padding-box ile herhangi bir ekstra (pseudo-) öğe kullanmadan da kullanabilirsiniz. Muhtemelen en kompakt çözümdür, ancak diğerleri kadar esnek değildir.

For example

: Eğer yakından bakarsanız

<div class="circle">Some text goes here...</div> 

.circle{ 
    width: 100px; 
    height: 100px; 
    padding: 50px; 
    border-radius: 200px; 
    border: double 15px rgba(255,255,255,0.7); 
    background: rgba(255,255,255,0.7); 
    background-clip: padding-box; 
} 

Result

Eğer sınır ve arka plan arasındaki kenar mükemmel olmadığını görebiliriz. Bu mevcut tarayıcılarda bir sorun gibi görünüyor. Ama sınır küçük olduğunda fark edilebilir değil.

+0

Bu, ek bir işaretleme olmadan çalışmasına ve [oldukça iyi desteklere sahiptir] (http://caniuse.com/#feat=background-img-opts) sağlar. 'background-color' plus' border: double', 'background-clip' stili olmayan kenarlıklar arasında şeffaflık için çalışmaz. –

İlgili konular