Φόντο CSS

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Οι ιδιότητες φόντου CSS χρησιμοποιούνται για την προσθήκη εφέ φόντου για στοιχεία.

Σε αυτά τα κεφάλαια, θα μάθετε για τις ακόλουθες ιδιότητες φόντου CSS:

style="color:crimson">χρώμα φόντου
style="color:crimson">εικόνα φόντου
style="color:crimson">background-repeat
style="color:crimson">background-attachment
style="color:crimson">background-position
style="color:crimson">φόντο (ιδιότητα συντομογραφίας)

Χρώμα φόντου CSS

Η ιδιότητα background-color καθορίζει το χρώμα φόντου ενός στοιχείου.

Παράδειγμα

Το χρώμα φόντου μιας σελίδας ορίζεται ως εξής:

body {
  background-color: lightblue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

Με το CSS, ένα χρώμα καθορίζεται συχνότερα από:

ένα έγκυρο όνομα χρώματος - όπως "κόκκινο"
μια τιμή HEX - όπως "#ff0000"
μια τιμή RGB - όπως "rgb(255,0,0)"

Κοιτάξτε τις τιμές χρώματος CSS για μια πλήρη εικόνα λίστα πιθανών τιμών χρώματος.

Άλλα Στοιχεία

Μπορείτε να ορίσετε το χρώμα φόντου για οποιαδήποτε στοιχεία HTML:

Παράδειγμα

Εδώ, τα στοιχεία <h1>, <p> και <div> θα έχουν διαφορετικά χρώματα φόντου:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}
p {
  background-color: 
yellow;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Αδιαφάνεια/Διαφάνεια

Η ιδιότητα αδιαφάνεια καθορίζει την αδιαφάνεια/διαφάνεια ενός στοιχείου. Μπορεί να πάρει μια τιμή από 0,0 - 1,0. Όσο χαμηλότερη τιμή, τόσο πιο διαφανές:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Παράδειγμα

div {
  background-color: green;
  opacity: 0.3;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Σημείωση: Όταν χρησιμοποιείτε την ιδιότητα αδιαφάνεια για να προσθέσετε διαφάνεια στο φόντο ενός στοιχείου, όλα τα θυγατρικά του στοιχεία κληρονομούν την ίδια διαφάνεια. Αυτό μπορεί να κάνει το κείμενο μέσα σε ένα πλήρως διαφανές στοιχείο δυσανάγνωστο.

Διαφάνεια με χρήση RGBA

Εάν δεν θέλετε να εφαρμόσετε αδιαφάνεια σε θυγατρικά στοιχεία, όπως στο παραπάνω παράδειγμά μας, χρησιμοποιήστε τιμές χρώματος RGBA. Το παρακάτω παράδειγμα ορίζει την αδιαφάνεια για το χρώμα του φόντου και όχι για το κείμενο:

100% opacity

60% opacity

30% opacity

10% opacity

Μάθατε από το Κεφάλαιό μας για τα χρώματα CSS, ότι μπορείτε να χρησιμοποιήσετε το RGB ως τιμή χρώματος. Εκτός από το RGB, μπορείτε να χρησιμοποιήσετε μια τιμή χρώματος RGB με ένα κανάλι άλφα (RGBA) - το οποίο καθορίζει την αδιαφάνεια για ένα χρώμα.

Μια τιμή χρώματος RGBA καθορίζεται με: rgba(κόκκινο, πράσινο, μπλε, άλφα). ο Η παράμετρος alpha είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανές) και 1,0 (πλήρως αδιαφανής).

Συμβουλή: Θα μάθετε περισσότερα για τα χρώματα RGBA στο Κεφάλαιο Χρώματα CSS.

Παράδειγμα

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

Η ιδιότητα χρώματος φόντου CSS

background-color: Ορίζει το χρώμα φόντου ενός στοιχείου