Một cách khác là tạo ra một div tương đối và đặt nó vào luồng của trang, đặt hình ảnh chính trước và sau đó đặt hình mờ lên trên. Nội phân chính - Phương pháp cơ bản để hiển thị hình mờ văn bản cho trang HTML:
- Làm thế nào để vô hiệu hóa việc lựa chọn văn bản Watermark của CSS?
- Làm thế nào để thêm một hình ảnh Watermark nền vào một trang HTML?
- Làm thế nào để thêm hình chữ nhật theo đường chéo?
- Làm thế nào để thêm văn bản Watermark lặp đi lặp lại theo đường chéo trong CSS HTML?
- Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?
- Làm cách nào để tạo hình ảnh trong suốt trong HTML?
- Làm thế nào để tôi đánh dấu một hình ảnh?
- Làm cách nào để thêm một hình ảnh màu vào hình ảnh trang web của tôi?
- Làm cách nào để thêm hình mờ trong HTML PDF?
<!Doctype>
<html>
<head>
<style>
.card
{
position: relative;
top: 0;
left: 0;
}
.watermark
{
position: absolute;
top: 60px;
left: 80px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img src="img/cardX.png" class="card"/>
<img src="img/watermark2.png" class="watermark"/>
</div>
</body>
</html>
Hoặc bạn có thể phủ lên hình ảnh của bạn với văn bản Watermark. Điều này có thể dễ dàng được thực hiện với HTML hoặc CSS. HTML: <figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>
Mã CSS dài hơn, vì bạn cần xác định lớp, v.v. và sử dụng: phần tử sau khi Brett mô tả ở trên. .watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Trong hướng dẫn đơn giản này, chúng tôi sẽ học cách thêm hình mờ theo những cách khác nhau thông qua HTML và CSS. Giả sử bạn muốn hiển thị logo của mình như một hình mờ trong nền trang web của bạn hoặc bạn muốn hiển thị một hình mờ văn bản cụ thể trong tiêu đề hoặc chân trang của trang web của bạn. Bạn có thể dễ dàng làm điều này với các phương pháp sau đây. Bạn cũng có thể thêm hình mờ văn bản bằng PHP. Nhưng trong hướng dẫn này, chúng tôi sẽ sử dụng HTML và CSS.how to add watermarks in different ways through HTML and CSS. Suppose you want to show your logo as a watermark in the background of your website or
you want to display a specific text watermark in the header or footer of your website. You can easily do this with the following methods below. You can also add text watermark using PHP. But in this tutorial, we are going to use HTML and CSS. Trước khi đi quá sâu, hãy để, hãy xem làm thế nào nó có thể được thực hiện rất dễ dàng. Sau đó chúng tôi sẽ bao gồm các phương pháp khác từng bước. Nội dung - Phương pháp cơ bản để hiển thị hình mờ văn bản cho trang HTML:
- Làm thế nào để vô hiệu hóa việc lựa chọn văn bản Watermark của CSS?
- Làm thế nào để thêm một hình ảnh Watermark nền vào một trang HTML?
- Làm thế nào để thêm hình chữ nhật theo đường chéo?
- Làm thế nào để thêm hình chữ nhật theo đường chéo?
- Làm thế nào để thêm văn bản Watermark lặp đi lặp lại theo đường chéo trong CSS HTML?
- Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?
Phương pháp cơ bản để hiển thị hình mờ văn bản cho trang HTML:- Làm cách nào để tạo hình ảnh trong suốt trong HTML?
- Làm thế nào để tôi đánh dấu một hình ảnh?
Làm cách nào để thêm một hình ảnh màu vào hình ảnh trang web của tôi?“Watermark text” is displaying at the top right corner of our web page. But the problem is, user can select the text. So we need to disable users selection by using
<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>
4. You can also learn from this tutorial How to make certain text unselectable with CSS?Làm thế nào để vô hiệu hóa việc lựa chọn văn bản Watermark của CSS?Làm thế nào để thêm một hình ảnh Watermark nền vào một trang HTML?disable the selection of watermark text, we need to add this CSS. .watermark{
position: fixed;
bottom: 0;
right: 0;
user-select: none; /* Non-prefixed version for chorme, opera and*/
-ms-user-select: none; /* Internet Explorer, Edge */
-moz-user-select: none; /* Firefox */
-khtml-user-select: none; /* Konqueror HTML */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
}
Làm thế nào để thêm hình chữ nhật theo đường chéo? Làm thế nào để thêm một hình ảnh Watermark nền vào một trang HTML?Làm thế nào để thêm hình chữ nhật theo đường chéo? - Làm thế nào để thêm văn bản Watermark lặp đi lặp lại theo đường chéo trong CSS HTML?
<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>
6 - Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?no-repeat
<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>
7 - Làm cách nào để tạo hình ảnh trong suốt trong HTML?
Làm thế nào để tôi đánh dấu một hình ảnh? Làm cách nào để thêm một hình ảnh màu vào hình ảnh trang web của tôi? html{
height: 100%;
}
body{
position: relative;
height: 100%;
}
body:before{
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(watermark.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
opacity: 0.2;
}
Làm cách nào để thêm hình mờ trong HTML PDF? Hoặc bạn có thể phủ lên hình ảnh của bạn với văn bản Watermark. Điều này có thể dễ dàng được thực hiện với HTML hoặc CSS. body:before{
content: 'CodeHasBug';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
color: #0d745e;
font-size: 100px;
font-weight: 500px;
display: grid;
justify-content: center;
align-content: center;
opacity: 0.2;
}
Mã CSS dài hơn, vì bạn cần xác định lớp, v.v. và sử dụng: phần tử sau khi Brett mô tả ở trên.watermark color by using .watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
6Làm thế nào để thêm hình chữ nhật theo đường chéo?Làm thế nào để thêm văn bản Watermark lặp đi lặp lại theo đường chéo trong CSS HTML? body:before{
content: 'CodeHasBug';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
color: #0d745e;
font-size: 100px;
font-weight: 500px;
display: grid;
justify-content: center;
align-content: center;
opacity: 0.2;
transform: rotate(-45deg);
}
Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web? Làm thế nào để thêm văn bản Watermark lặp đi lặp lại theo đường chéo trong CSS HTML?Điều này có thể được thực hiện chỉ bằng cách sử dụng CSS & HTML. Chúng ta cần thêm jQuery hoặc javascript để có được kết quả mong muốn. Nhưng chúng ta sẽ học dòng Watermark CSS thuần túy. Nếu chúng ta muốn làm bằng cách sử dụng hình ảnh thì có thể. Nếu không, chúng ta phải sử dụng tập lệnh cho điều đó. Vì vậy, chúng tôi cần hình ảnh xoay cho điều đó. Kiểm tra hình ảnh dưới đây.pure CSS watermark. If we want to do by using image then it can be possible. Otherwise, we have to use the script for that. So we need rotated image for that. Check the picture below. html{
height: 100%;
}
body{
position: relative;
height: 100%;
}
body:before{
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background: url(watermark.png) 0 0 repeat;
background-position: center;
opacity: 0.1;
}
Ở đây chúng tôi đã sử dụng lặp lại. Vì vậy, nó sẽ lặp lại cùng một hình ảnh. Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?Trong hình trên, chúng ta có thể thấy Watermark văn bản chỉ hiển thị khi người dùng muốn in trang web dưới dạng PDF hoặc trực tiếp từ máy in. Điều này rất hữu ích bất cứ khi nào ai đó muốn in dữ liệu từ trang web của bạn, Watermark cũng sẽ được in trên trang đó. Vì vậy, hãy để kiểm tra cách làm điều này. ________số 8Trong ví dụ trên, chúng tôi đang sử dụng .watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
9 phương tiện truyền thông. Vì vậy, phong cách CSS ở trên chỉ hoạt động khi chúng ta in một cái gì đó.Làm cách nào để tạo hình ảnh trong suốt trong HTML?Đầu tiên, chúng tôi tạo một phần tử (class = "bục") với hình nền và đường viền. Chúng tôi tạo một phần khác (class = "transbox") bên trong phần đầu tiên. Có một màu nền, và một đường viền - Div là trong suốt.create a element (class="background") with a background image, and a border. Then we create another (class="transbox") inside the first . The have a background color, and a
border - the div is transparent. Làm thế nào để tôi đánh dấu một hình ảnh?Chèn một hình mờ hình ảnh.. Trên tab Thiết kế, chọn Watermark .. Chọn Watermark tùy chỉnh, sau đó chọn hình ảnh hình ảnh .. Bấm vào chọn hình ảnh .. Tìm hình ảnh của riêng bạn hoặc tìm kiếm hình ảnh Bing .. Chọn hình ảnh bạn muốn và chọn Chèn .. Làm cách nào để thêm một hình ảnh màu vào hình ảnh trang web của tôi?Làm thế nào để tạo ra một hình mờ trong 5 bước dễ dàng.. Mở logo của bạn hoặc tạo một bản với đồ họa và/hoặc văn bản .. Tạo một nền trong suốt cho hình mờ của bạn .. Thêm hình ảnh hình mờ trên đầu ảnh .. Sử dụng thanh trượt Fade để điều chỉnh độ trong suốt của Watermark .. Làm cách nào để thêm hình mờ trong HTML PDF?Thêm hoặc thay thế một hình mờ, không có tài liệu mở (chỉ Windows).. Chọn Công cụ> Chỉnh sửa PDF> Watermark> Thêm .. Trong hộp thoại, nhấp vào Thêm tệp, chọn Thêm tệp và sau đó chọn các tệp. .... Bấm OK để đóng hộp thoại Thêm Watermark ..
| 
