![Analyse allgemeiner Grundvorgänge der MySQL-Datenbank [Datenbank erstellen, anzeigen, ändern und löschen]](/upload/images/67cad65c75842.webp)
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
Einführung in das MySQL Connection Control Plugin
Inhaltsverzeichnis 1. Einführung in das Verbindun...
Der einfachste Weg zum Debuggen gespeicherter Prozeduren in MySQL
Ein Kollege hat mir einmal gesagt, ich solle eine...
Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen
1. Komplexe SQL-Abfragen 1.1. Einzeltabellenabfra...
JavaScript-Makrotasks und Mikrotasks
Makrotasks und Mikrotasks JavaScript ist eine Sin...
Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL
Inhaltsverzeichnis Implementierung einer Suchmasc...
Einführung in CSS-Stileinführungsmethoden und ihre Vor- und Nachteile
Drei Möglichkeiten, CSS einzuführen 1. Inline-Sti...
Detaillierte Erläuterung des Implementierungsprozesses der ServerSocket-Standard-IP-Bindung
Wenn der Server während der Entwicklung gestartet...
So überprüfen Sie die Festplattengröße und mounten die Festplatte in Linux
Es gibt zwei Arten von Festplatten in Linux: gemo...
So berechnen Sie die Bildrate FPS von Webanimationen
Inhaltsverzeichnis Standards für flüssige Animati...
Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL
Als ich MySQL konfiguriert habe, habe ich die Sta...
Linux-Swap-Partition (ausführliche Erklärung)
Inhaltsverzeichnis linux 1. Was ist SWAP 2. Was p...
Eine kurze Analyse der privaten Docker-Bildbibliothek und des Alibaba Cloud-Objektspeicher-OSS
Private Docker-Imagebibliothek Private Docker-Bil...
Einführung in die Verwendung von this in HTML-Tags
Zum Beispiel: Code kopieren Der Code lautet wie fo...
mysql8.0.23 Linux (Centos7) Installation vollständiges und ausführliches Tutorial
Inhaltsverzeichnis Was ist eine relationale Daten...
CSS3-Textanimationseffekte
Wirkung html <div Klasse="sp-container&qu...