Tôi rất mới với HTML / CSS và tôi đang cố gắng hiển thị một số văn bản giống như trong suốt 50%. Cho đến nay tôi đã có HTML để hiển thị văn bản với độ mờ đầy đủ
<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>Tuy nhiên, tôi không chắc làm thế nào để thay đổi độ mờ của nó. Tôi đã thử tìm kiếm trực tuyến, nhưng tôi không chắc chắn chính xác phải làm gì với mã tôi tìm thấy.
Câu trả lời:
opacityáp dụng cho toàn bộ phần tử, vì vậy nếu bạn có nền, đường viền hoặc các hiệu ứng khác trên phần tử đó, chúng cũng sẽ trở nên trong suốt. Nếu bạn chỉ muốn văn bản trong suốt, hãy sử dụng rgba.
#foo {
color: #000; /* Fallback for older browsers */
color: rgba(0, 0, 0, 0.5);
font-size: 16pt;
font-family: Arial, sans-serif;
}Ngoài ra, hãy lái thật xa, thật xa <font>. Chúng tôi có CSS cho điều đó ngay bây giờ.
rgba.
Kiểm tra Opacity , Bạn có thể đặt thuộc tính css này thành div, <p>hoặc bằng cách sử dụng <span>bạn muốn làm trong suốt
Và nhân tiện, thẻ phông chữ không được dùng nữa , hãy sử dụng css để tạo kiểu cho văn bản
div {
opacity: 0.5;
} Chỉnh sửa: Mã này sẽ làm cho toàn bộ phần tử trong suốt, nếu bạn muốn ** chỉ văn bản ** kiểm tra trong suốt @Mattias Buelens answer
Chỉ cần sử dụng rgbathẻ làm màu văn bản của bạn. Bạn có thể sử dụng opacity, nhưng điều đó sẽ ảnh hưởng đến toàn bộ phần tử, không chỉ văn bản. Giả sử bạn có một đường viền, nó cũng sẽ làm cho nó trong suốt.
.text
{
font-family: Garamond, serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}Giải pháp tốt nhất của bạn là xem thẻ "opacity" của một phần tử.
Ví dụ:
.image
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}Vì vậy, trong trường hợp của bạn, nó sẽ giống như sau:
<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>Tuy nhiên, đừng quên thẻ không được hỗ trợ trong HTML5.
Bạn cũng nên sử dụng CSS :)
Còn opacitythuộc tính css ? 0thành 1các giá trị.
Nhưng sau đó bạn có thể cần sử dụng một phần tử dom rõ ràng hơn là "font". Ví dụ:
<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>Như một thông tin bổ sung, tất nhiên, tôi khuyên bạn nên sử dụng các khai báo CSS bên ngoài các phần tử html của bạn, nhưng cũng cố gắng sử dụng kiểu phông chữ css thay vì thẻ html phông chữ.
Đối với trình tạo kiểu css3 trình duyệt chéo, hãy xem tại http://css3please.com/
Dễ dàng! phía sau của cậu:
<font color=\"black\" face=\"arial\" size=\"4\">thêm cái này:
<font style="opacity:.6"> bạn chỉ cần thay đổi ".6" cho một số thập phân từ 1 đến 0
Không có thuộc tính CSS nào như background-opacity mà bạn chỉ có thể sử dụng để thay đổi độ mờ hoặc độ trong suốt của nền phần tử mà không ảnh hưởng đến các phần tử con, mặt khác nếu bạn cố gắng sử dụng thuộc tính opacity của CSS, nó sẽ không chỉ thay đổi độ mờ của nền nhưng cũng thay đổi độ mờ của tất cả các phần tử con. Trong trường hợp này, bạn có thể sử dụng màu RGBA được giới thiệu trong CSS3 bao gồm độ trong suốt alpha như một phần của giá trị màu. Sử dụng màu RGBA, bạn có thể đặt màu của nền cũng như độ trong suốt của nó.
cố gắng chơi với mix-blend-mode: multiply;
color: white;
background: black;
mix-blend-mode: multiply;