Làm mờ chữ trong html

Nếu đã nghiên cứu CSS3 bạn sẽ thấy không có thuộc tính nào giúp làm mờ chữ. Nhưng chỉ cần kết hợp 2 thuộc tính text-shadowcolor là bạn đã có thể giải quyết được vấn đề này

Làm mờ chữ trong html

Và đây là đoạn mã CSS cần thiết:

.textblur {
	color: transparent;
	text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

Trong demo, mình sử dụng hiệu ứng khi hover qua thì chữ sẽ hết bị mờ, và kèm theo hiệu ứng transition, mã CSS như sau:

.textblur {
color: transparent;
text-shadow: 0 0 20px rgba(0,0,0,0.5);
text-align: center;
height: 120px;
line-height: 60px;
font-size: 40px;
-webkit-transition: text-shadow 1.9s; 
-moz-transition: text-shadow 1.9s;
}

.textblur:hover {
text-shadow: 0 0 0 rgba(0,0,0,1);
-webkit-transition: text-shadow 0.5s; 
-moz-transition: text-shadow 0.5s;
}

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ờ hoàn toàn

<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 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.

  • html
  • css
  • opacity

85 hữu ích 0 bình luận 320k xem chia sẻ

answer

86

Làm mờ chữ trong html

Kiểm tra Opacity , Bạn có thể đặt thuộc tính css này thành div, <p>hoặc 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 tạo ** chỉ văn bản ** kiểm tra minh bạch @Mattias Buelens trả lời

86 hữu ích 4 bình luận chia sẻ

answer

230

Làm mờ chữ trong html

opacityáp dụng cho toàn bộ thành phần, vì vậy nếu bạn có nền, đường viền hoặc các hiệu ứng khác trên thành phần đó, chúng cũng sẽ trở nên trong suốt. Nếu bạn chỉ muốn văn bản được minh bạch, 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, chỉ đạo xa, xa <font>. Chúng tôi có CSS ​​cho điều đó ngay bây giờ.

230 hữu ích 5 bình luận chia sẻ

answer

15

Làm mờ chữ trong html

Chỉ cần sử dụng rgbathẻ như 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ộ thành phần, không chỉ văn bản. Nói rằng 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);
    }

15 hữu ích 0 bình luận chia sẻ

answer

9

Làm mờ chữ trong html

Giải pháp tốt nhất của bạn là nhìn vào thẻ "độ mờ" 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ẽ trông giống như:

<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 :)

9 hữu ích 0 bình luận chia sẻ

answer

3

Làm mờ chữ trong html

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 số thập phân từ 1 đến 0

3 hữu ích 0 bình luận chia sẻ

answer

3

Làm mờ chữ trong html

Còn opacitythuộc tính css thì sao? 0đến 1các giá trị.

Nhưng sau đó, bạn có thể cần phải sử dụng một yếu tố dom rõ ràng hơn "phông chữ". 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 sẽ đề nghị bạ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 css phông chữ thay vì thẻ html phông chữ.

Đối với trình tạo kiểu css3 của trình duyệt chéo, hãy xem http://css3please.com/

3 hữu ích 0 bình luận chia sẻ

answer

2

Làm mờ chữ trong html

Mặt khác, không có thuộc tính CSS như độ mờ nền mà bạn chỉ có thể sử dụng để thay đổi độ mờ hoặc độ trong của nền của phần tử mà không ảnh hưởng đến các phần tử con, mặt khác, nếu bạn sẽ cố gắng sử dụng thuộc tính độ mờ 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 tình huống như vậ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 nền cũng như độ trong suốt của nó.

2 hữu ích 0 bình luận chia sẻ

answer

2

Làm mờ chữ trong html

cố gắng chơi xung quanh với mix-blend-mode: multiply;

color: white;
background: black;
mix-blend-mode: multiply;

MDN

hướng dẫn

2 hữu ích 0 bình luận chia sẻ

Làm mờ chữ trong html

Đăng nhập để trả lời câu hỏi

Có thể bạn quan tâm

Làm mờ chữ trong html