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 văn bản Watermark trong CSS?
- 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 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 văn bản Watermark trong CSS?“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
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 thế nào để vô hiệu hóa việc lựa chọn văn bản Watermark của CSS?disable the selection of watermark text by 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 văn bản Watermark trong 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 văn bản Watermark trong CSS?
- Làm thế nào để thêm hình chữ nhật theo đường chéo?
3html{ 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 thế nào để thêm văn bản Watermark lặp đi lặp lại theo đường chéo trong CSS HTML?no-repeat
4html{ 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 thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?
Để thêm một bản nhạc Watermark trên cùng bên phải của một trang, chúng ta cần thêm phần tử div với tên lớp watermark. Vì vậy, thêm của bạn.
Sau đó thêm CSS
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;
}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;
}Để vô hiệu hóa việc lựa chọn văn bản Watermark, chúng ta cần thêm CSS này.
Ví dụ trên là cơ bản. Vì vậy, hãy để Lừa có một chút sâu sắc hơn vào chủ đề này.
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;
}Để thêm một hình ảnh hình mờ nền, hãy làm theo các bước dưới đây.watermark color by using
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;
}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?
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?
Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?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;
}Để thêm một bản nhạc Watermark trên cùng bên phải của một trang, chúng ta cần thêm phần tử div với tên lớp watermark. Vì vậy, thêm của bạn.
Làm thế nào để hiển thị một hình mờ chỉ khi người dùng in một trang web?
Để thêm một bản nhạc Watermark trên cùng bên phải của một trang, chúng ta cần thêm phần tử div với tên lớp watermark. Vì vậy, thêm của bạn.
html{
height: 100%;
}
body{
position: relative;
height: 100%;
}
@media print {
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];
}
}Sau đó thêm CSS
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;
}