Yếu tố độ mờ nhưng không biên giới

Question

Vâng, tôi có câu hỏi này và tôi thấy rằng ai đó đã hỏi một cái gì đó tương tự nhưng điều này tôi chưa hiểu.

Điều tôi muốn làm là đặt độ mờ là 0,7 thành phần tử nhưng chỉ với nội dung chứ không phải biên giới, tôi muốn đường viền ở đầy màu. Một số mã mẫu tại đây:

input#element{ 
    width: 382px; 
    height: 26px; 
    border: 2px solid #FFF; 
    border-radius: 3px; 
    opacity: 0.8; 
} 

Kết quả là phần tử đầu vào của tôi có độ mờ nhưng ngay cả trong biên giới, ai đó có thể cho tôi biết cách đặt độ mờ chỉ trong nội dung chứ không phải đường viền?

Cảm ơn.

Answer 1

Sử dụng rgba cú pháp cho cả màu sắc và nền và không sử dụng opacity cho cả yếu tố

demo dabblet

input { 
    width: 382px; 
    height: 26px; 
    border: 2px solid #FFF; 
    border-radius: 3px; 
    background: rgba(255, 255, 255, .8); 
    color: rgba(0, 0, 0, .8); 
} 

Answer 2

Bạn có thể sử dụng background:rgba tài sản cho kết quả mong muốn rằng sẽ chỉ ảnh hưởng đến bạn parent không phải là child và cũng cho số border của parent.

CSS

input#element{ 
    width: 382px; 
    height: 26px; 
    border: 2px solid #000; 
    border-radius: 3px; 
    background:rgba(255,0,0,0.1); 
} 

DEMO

Answer 3

Tôi không thấy rằng vấn đề là về một yếu tố đầu vào, nhưng có lẽ câu trả lời của tôi sẽ giúp người khác, vì vậy ở đây chúng tôi đi.

Như các áp phích khác đã nói, bạn có thể sử dụng cú pháp rgba để xác định màu nền của mình.

Nếu có những yếu tố lồng nhau trong một trong những bạn muốn thay đổi, bạn cũng có thể áp dụng các opacity cho họ với css này:

#element > * { 
    opacity:0.8; 
} 

Dưới đây là một ví dụ: JsFiddle

Nếu bạn muốn có một background-image cho phần tử của bạn, tôi nghĩ cách tốt nhất vẫn là bọc nó trong một thùng chứa với đường viền.

Answer 4

nền opacity nhưng không css biên giới

Demo here

html

<div id="element"></div> 

css

#element{ 
    width: 156px; 
    height: 156px; 
    border: 2px solid #96d5ea; 
    background:rgba(150, 213, 234,1); 
    margin: 35px auto; 
    -webkit-transform: rotate(-45deg); 
    -webkit-transition: all 1s ease; 
} 

#element:hover { 
    background:rgba(150, 213, 234,0); 
    -webkit-transform: rotate(315deg); 
}