Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS3 фонове

В CSS3 са въведени нови свойства за задаване на фонове. Свойството background-size определя размера на изображението което се използва за формиране на фона. Размерът се задава в пиксели или в проценти. Това означава, че освен мащабиране на изображението то може да се разтяга и свива самостоятелно по всяка от координатите. Реалното изображение е следното:



<!DOCTYPE html>
<html>
   <head>
        <style> 
            #div1 {
                   width:600px;
                   height:600px;
                   background:url(piramid.png);
                   background-size:60px 60px;
                   background-repeat:repeat; 
            }
        </style>
   </head>
<body>
   <div align="center">
      <div id="div1"></div>
   </div>
</body>
</html>

Горният пример в браузъра ще изглежда така:


CSS3 позволява използването на няколко фонови изображения за един и същ елемент.


<!DOCTYPE html>
<html>
    <head>
        <style> 
            #div1 {
                        width:600px;
                        height:600px;
                        background:url(piramid.png),url(circle.png);
                        background-repeat:repeat; 
             }
        </style>
    </head>
<body>
    <div align="center">
        <div id="div1"></div>
    </div>
</body>
</html>

Горният пример в браузъра ще изглежда така.


Свойството background-clip определя площ за фонов цвят


<!DOCTYPE html> 
<html> 
    <head> 
        <style>  
           div.clip {
                         width:400px;
                         height:320px;
                         padding:40px;
                         background-color:#D6EAFF;
                         background-clip:content-box;
                         border:2px solid #FF4500;
           }
          p.margin {
                        margin:15px;
                        font-family:arial;
                        font-size:12px;
                        text-align:justify;
           }
        </style> 
    </head> 
    <body> 
        <div align="center"> 
             <div class="clip"> 
                  <p class="margin"> Тук се записва текст за карето!</p> 
             </div> 
        </div> 
    </body> 
</html> 

Горният пример в браузъра ще изглежда така.