Làm cách nào để thay thế văn bản bằng hình ảnh trong css?

Văn bản “Văn bản cũ” cần được ẩn trước và văn bản mới phải được định vị chính xác ở vị trí của văn bản cũ. Để làm như vậy, chúng tôi thay đổi mức độ hiển thị của văn bản này bằng CSS thành ẩn trước

Nội dung chính Show

Làm cách nào để ghi đè lên văn bản trong CSS?
Kỹ thuật thay thế hình ảnh trong CSS là gì?
Làm cách nào để ghi đè lên hình ảnh trong CSS?
Kỹ thuật thay thế hình ảnh là gì?

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

Sau đó, chúng tôi thêm một văn bản mới ở cùng một vị trí, sử dụng các phần tử giả và vị trí rõ ràng tương ứng

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

Lưu ý rằng after là phần tử giả được sử dụng ở đây. Chúng tôi sử dụng công cụ sửa đổi khả năng hiển thị một lần nữa để hiển thị văn bản mới. Thuộc tính nội dung chứa văn bản mới
Thí dụ

<html>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

<

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

2______88_______

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

4_______86_______

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

6>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

8_______0_______9

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

This text replaces the original.

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

This text replaces the original.

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

This text replaces the original.

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

This text replaces the original.

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

4_______29_______1

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

6>

<p class="toBeReplaced"><span>Old Text</span></p>

1_______0_______2>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

<

<p class="toBeReplaced"><span>Old Text</span></p>

9>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

4_______86__________

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

3_______88_______

<p class="toBeReplaced"><span>Old Text</span></p>

1_______29_______9>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

<p class="toBeReplaced"><span>Old Text</span></p>

1____87_______>

đầu ra

This text replaces the original.

Method 2: Using Pseudo Elements and Visibility Modifier with tag
In this method, we need a little bit more markup but we no longer need to specify any absolute positioning for our new text. We wrap the text using tags.

<p class="toBeReplaced"><span>Old Text</span></p>

In this method, we use a child element to wrap the text, that is, the text is now inside

and tags. So we can use the display: none CSS attribute to hide the text in the element. Then we can simply replace the text as we did in the previous method, without specifying any positioning.

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

Thí dụ

<html>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

<

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

2______88_______

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

4_______86_______

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

6>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

8<9

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

0html1

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

This text replaces the original.

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

4_______29_______1

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

6>

<p class="toBeReplaced"><span>Old Text</span></p>

1_______0_______2>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

<

<p class="toBeReplaced"><span>Old Text</span></p>

9>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

4_______86__________

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

3>

<p class="toBeReplaced"><span>Old Text</span></p>

1_______29_______9>

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

<p class="toBeReplaced"><span>Old Text</span></p>

1____87_______>

đầu ra

This text replaces the original.

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

Làm cách nào để ghi đè lên văn bản trong CSS?

Văn bản “Văn bản cũ” cần được ẩn trước và văn bản mới phải được định vị chính xác tại vị trí của văn bản cũ. Để làm như vậy, chúng tôi thay đổi mức độ hiển thị của văn bản này bằng cách sử dụng CSS thành ẩn trước. Sau đó, chúng tôi thêm một văn bản mới ở cùng một vị trí, sử dụng các phần tử giả và vị trí rõ ràng tương ứng .

Kỹ thuật thay thế hình ảnh trong CSS là gì?

Thay thế hình ảnh CSS là kỹ thuật thay thế phần tử văn bản (thường là thẻ tiêu đề) bằng hình ảnh . Một ví dụ về điều này sẽ bao gồm một logo trên một trang. Bạn có thể muốn sử dụng thẻ

Làm cách nào để ghi đè lên hình ảnh trong CSS?

Bắt đầu với phần tử có hình nền, không phải thẻ. Sau đó, việc thay đổi hình nền trong CSS sẽ thay thế hình nền đó . Bắt đầu với một thẻ, nhưng sử dụng Javascript để thay đổi thuộc tính src.