Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen
|
Wenn Sie den Datumswähler kapseln, müssen Sie die Schriftfarbe bei der Auswahl abdunkeln. Schauen wir uns den Effekt nach der Implementierung an
Sie können sehen, dass nicht der gesamte Text abgedunkelt ist, sondern der Bereich in der Mitte. Der Schwerpunkt der heutigen Diskussion liegt nicht auf der Kapselung des Selektors, sondern hauptsächlich auf dem Stileffekt. Wenn Sie die Implementierungsideen dieser Komponente verstehen möchten, können Sie den vorherigen Artikel „Implementierungsideen für Datumswähler“ lesen: 1. Zunächst einmal wird die Farbe des Bereichs dunkler, wenn er eintritt , nicht die gesamte Schriftart , daher können wir nicht damit beginnen, den Textstil aus der Auswahl zu ändern. Wenn wir den Bereich sehen, denken wir zuerst an die Maske . 2. Es ist jedoch einfach, die mittlere Farbe heller zu machen, indem man eine Maskenebene verwendet. Dazu muss man nur eine Maskenebene + Transparenz + Positionierung hinzufügen . Aber wie kann man die mittlere Farbe durch Hinzufügen einer Maskenebene dunkler machen ? Wenn Sie sich damit herumschlagen, den Effekt der Abdunklung der Farbe des ausgewählten Teils zu lösen, werden Sie in tiefes Grübeln verfallen. . . 3. Wir wissen, dass es einfach ist, die Farbe aufzuhellen. Fügen wir daher allen Teilen außer dem ausgewählten mittleren Teil eine Maskenebene hinzu , um die Farbe aufzuhellen. Der ausgewählte Teil wird dann natürlich dunkel. 4. Nachdem Sie sich entschieden haben , oben und unten Maskenebenen hinzuzufügen, ist noch eine weitere Frage zu berücksichtigen: Kann Code-Implementierung:
//html-Struktur <body>
<div Klasse="Box">
<p Klasse="oben"></p>
<p Klasse="eins">123123</p>
.....Viele <p class="one">123123</p> werden hier weggelassen
<p Klasse="unten"></p>
</div>
</body>
//Stil <Stil>
.Kasten{
Rand oben: 100px;
Höhe: 420px;
Breite: 300px;
Position: relativ;
Hintergrundfarbe: fff;
Überlauf: automatisch;
Rand: Indigo 1px durchgezogen;
}
P{
Rand: 0;
Höhe: 20px;
Textausrichtung: zentriert;
}
// Füge eine Maskenebene mit weißem Hintergrund und Transparenz hinzu, um die Farbe des blockierten Textes heller zu machen.top{
Höhe: 200px;
Hintergrundfarbe: #fff;
Position: klebrig; //******* Tastencode oben: 0; //******* Tastencode Deckkraft: .4; //******* Tastencode}
.unten{
Höhe: 200px;
Hintergrundfarbe: #fff;
Position: klebrig;
unten: 0;
Deckkraft: .4;
}
</Stil>
Ergebnis:
Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen. Weitere relevante Inhalte zu CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche
>>: Bootstrap 3.0 - Schaltflächenstil für Lernnotizen
Artikel empfehlen
JS tiefe und flache Kopierdetails
Inhaltsverzeichnis 1. Was bedeutet „Shallow Copy“...
Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3
Inhaltsverzeichnis 1. Ref und reaktiv 1. reaktiv ...
Detailliertes Beispiel für die Verwendung von Typescript zum Einkapseln von Axios in Vue3
Dieses Axios-Paket wird in der Vue3-Demo verwende...
So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx
Es gibt zwei Möglichkeiten, mit Nginx mehrere Pro...
Super einfache QPS-Statistikmethode (empfohlen)
Statistik der QPS-Werte der letzten N Sekunden (i...
So ziehen Sie das Docker-Image herunter, um die Version anzuzeigen
Um die Version und das Tag des Bildes anzuzeigen,...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Detaillierte Erläuterung der Verwendung von var () von CSS3 zum Ändern von SCSS-Variablenwerten zur Laufzeit
var() Einführung und Verwendung Details (MDN) IE ...
So verwenden Sie boost.python, um die dynamische C++-Bibliothek unter Linux aufzurufen
Vorwort Vor Kurzem habe ich begonnen, Robot Frame...
Lombok-Implementierung JSR-269
Vorwort Einführung Lombok ist ein praktisches Too...
So greifen Sie über eine unabhängige IP direkt auf das Docker-für-Windows-Container-Intranet zu
Docker empfiehlt offiziell, dass wir Port-Mapping...
Benutzererfahrung bei der Neugestaltung der Portal-Website
<br />Vom Start der neuen Homepage von NetEa...
Einfache Schritte zur Implementierung der Autorisierung eines öffentlichen H5 WeChat-Kontos
Vorwort Gestern gab es ein Projekt, das die Imple...
Lösung für Indexfehler, die durch implizite MySQL-Typkonvertierung verursacht werden
Inhaltsverzeichnis Frage Reproduktion Implizite K...
Detaillierte Erklärung zur Verwendung von Router-View-Komponenten in Vue
Wenn Sie ein Vue-Projekt entwickeln, müssen Sie h...