Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira,...
Transcript of Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira,...
![Page 1: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/1.jpg)
Aula 9Cores
backgrounds
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
12/05/15 © P C F de Oliveira 2015 1
![Page 2: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/2.jpg)
12/05/15 © P C F de Oliveira 2015 2
E como fica a cor?
![Page 3: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/3.jpg)
12/05/15 © P C F de Oliveira 2015 3
Background color
Border color
Font color
![Page 4: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/4.jpg)
12/05/15 © P C F de Oliveira 2015 4
Green
BlueRed
Blue: 255(100%)
Red: 255(100%)
Green: 255(100%)
ModeloRGB
![Page 5: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/5.jpg)
12/05/15 © P C F de Oliveira 2015 5
Blue: 128(50%)
Red: 128(50%)
Green: 128(50%)
ModeloRGB
![Page 6: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/6.jpg)
12/05/15 © P C F de Oliveira 2015 6
Blue: 0(0%)
Red: 0(0%)
Green: 0(0%)
ModeloRGB
![Page 7: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/7.jpg)
12/05/15 © P C F de Oliveira 2015 7
Blue: 130(51%)
Red: 200(78%)
Green: 178(70%)
ModeloRGB
![Page 8: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/8.jpg)
12/05/15 © P C F de Oliveira 2015 8
Cores
Padrão
![Page 9: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/9.jpg)
12/05/15 © P C F de Oliveira 2015 9
Exemplos
body {color: silver;background-color: gray;border-bottom-color: orange;
}
![Page 10: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/10.jpg)
12/05/15 © P C F de Oliveira 2015 10
Selecionando uma cor
![Page 11: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/11.jpg)
12/05/15 © P C F de Oliveira 2015 11
Especificando valores RGB
§ rgb (255,255,255)§ rgb (100%, 100%, 100%)§ #FFFFFF§ #FFF
![Page 12: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/12.jpg)
12/05/15 © P C F de Oliveira 2015 12
Exemplo
body { background-color: rgb(204, 102, 0); }
![Page 13: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/13.jpg)
12/05/15 © P C F de Oliveira 2015 13
Exemplo
body { background-color: rgb(80%, 40%, 0%); }
![Page 14: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/14.jpg)
12/05/15 © P C F de Oliveira 2015 14
Exemplo
body { background-color: #cc6600}
![Page 15: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/15.jpg)
12/05/15 © P C F de Oliveira 2015 15
Especificando valores em Hexadecimal
![Page 16: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/16.jpg)
12/05/15 © P C F de Oliveira 2015 16
Contagem
Hexa
![Page 17: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/17.jpg)
12/05/15 © P C F de Oliveira 2015 17
Como converter?
![Page 18: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/18.jpg)
12/05/15 © P C F de Oliveira 2015 18
#CC 66 00
#1
![Page 19: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/19.jpg)
12/05/15 © P C F de Oliveira 2015 19
CC
#2
![Page 20: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/20.jpg)
12/05/15 © P C F de Oliveira 2015 20
66
#3
![Page 21: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/21.jpg)
12/05/15 © P C F de Oliveira 2015 21
00
#4
![Page 22: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/22.jpg)
12/05/15 © P C F de Oliveira 2015 22
Resultado
#CC 66 00
![Page 23: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/23.jpg)
12/05/15 © P C F de Oliveira 2015 23
Site sobre cores
http://html-color-codes.info/
![Page 24: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/24.jpg)
12/05/15 © P C F de Oliveira 2015 24
Códigos Interessantes
#FFFFFF ou #FFF ou rgb (255,255,255) = Branco
#000000 ou #000 ou rgb (0,0,0) = Preto
![Page 25: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/25.jpg)
12/05/15 © P C F de Oliveira 2015 25
Exemplo<!DOCTYPE html><html><head>
<style> body { color: red; } h1 { color: #00ff00; } p.ex { color: rgb(0,0,255); }
</style></head><body>
<h1>Este é o cabeçalho 1</h1>
Continua no próximo slide…
Cor do texto (e borda)
![Page 26: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/26.jpg)
12/05/15 © P C F de Oliveira 2015 26
Exemplo
<p>Este é um parágrafo comum. Note que este texto é vermelho. A cor padrão (default) do texto (text-color) para uma página é definida no seletor "body".</p>
<p class="ex">Este é um parágrafo da classe "ex". Este texto é azul.</p></body></html>
Continuação do slide anterior
![Page 27: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/27.jpg)
12/05/15 © P C F de Oliveira 2015 27
Resultado
![Page 28: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/28.jpg)
12/05/15 © P C F de Oliveira 2015 28
Exemplo<!DOCTYPE html><html><head>
<style> body { background-color: yellow; }h1 { background-color: #00ff00; }p { background-color: rgb(255,0,255); }
</style></head><body>
<h1>Este é o cabeçalho 1</h1><p>Este é um parágrafo.</p>
</body></html>
Cor
de
fun
do
![Page 29: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/29.jpg)
12/05/15 © P C F de Oliveira 2015 29
Resultado
![Page 30: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/30.jpg)
12/05/15 © P C F de Oliveira 2015 30
Imagens de background?
![Page 31: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/31.jpg)
12/05/15 © P C F de Oliveira 2015 31
background-image
Inserir imagem de
fundo
body { background-image: url (star.gif); }
![Page 32: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/32.jpg)
12/05/15 © P C F de Oliveira 2015 32
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");}
</style></head><body>
<h1>Alô Mundo!</h1></body></html>
![Page 33: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/33.jpg)
12/05/15 © P C F de Oliveira 2015 33
Resultado
![Page 34: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/34.jpg)
12/05/15 © P C F de Oliveira 2015 34
background-repeat
Ladrilhar imagem de
fundo
body { background-image: url (star.gif);background-repeat: repeat-x;
}
![Page 35: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/35.jpg)
12/05/15 © P C F de Oliveira 2015 35
repeat-x
repeat-y
no-repeat
repeat
inherit
![Page 36: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/36.jpg)
12/05/15 © P C F de Oliveira 2015 36
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: repeat-x;
}</style>
</head><body>
<h1>Alô Mundo!</h1></body></html>
![Page 37: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/37.jpg)
12/05/15 © P C F de Oliveira 2015 37
Resultado
![Page 38: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/38.jpg)
12/05/15 © P C F de Oliveira 2015 38
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: repeat-y;
}</style>
</head><body>
<h1>Alô Mundo!</h1></body></html>
![Page 39: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/39.jpg)
12/05/15 © P C F de Oliveira 2015 39
Resultado
![Page 40: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/40.jpg)
12/05/15 © P C F de Oliveira 2015 40
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: no-repeat;
}</style>
</head><body>
<h1>Alô Mundo!</h1></body></html>
![Page 41: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/41.jpg)
12/05/15 © P C F de Oliveira 2015 41
Resultado
![Page 42: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/42.jpg)
12/05/15 © P C F de Oliveira 2015 42
background-position
Posicionar a imagem de
fundo
body { background-image: url (star.gif);background-position: left center;
}
![Page 43: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/43.jpg)
12/05/15 © P C F de Oliveira 2015 43
porcentagem
left
center
right
top
bottom
comprimento
inherit
![Page 44: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/44.jpg)
12/05/15 © P C F de Oliveira 2015 44
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: no-repeat;background-position: right center;
}</style>
</head>
Continua no próximo slide…
![Page 45: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/45.jpg)
<body> <p>Lorem ipsum dolor sit amet, vide aperiri
interpretaris ius ei, pro ne commodo dolores, ex eum reque mucius mollis. Summo possim temporibus et quo. Aliquando referrentur ei sit, pro ut dolor maiorum hendrerit. </p>
<p>Usu ut augue graeco invenire. Aeque luciliusreferrentur pri no, usu an vivendo ponderuminterpretaris, at tamquam noluisse dissentiunt est. At quodsi detraxit definitiones vix. Ex aliquidmediocrem appellantur duo, iisque consulatu duo ne.
</p></body></html>
12/05/15 © P C F de Oliveira 2015 45
Exemplo
Continuação do slide anterior
![Page 46: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/46.jpg)
12/05/15 © P C F de Oliveira 2015 46
Resultado
![Page 47: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/47.jpg)
12/05/15 © P C F de Oliveira 2015 47
Outros
exemplos
![Page 48: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/48.jpg)
12/05/15 © P C F de Oliveira 2015 48
Outros
exemplos
![Page 49: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/49.jpg)
12/05/15 © P C F de Oliveira 2015 49
Outros
exemplos
![Page 50: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/50.jpg)
12/05/15 © P C F de Oliveira 2015 50
background-attachment
Rolar/fixar a imagem de
fundo
body { background-image: url (star.gif);background-repeat: no-repeat;background-position: center 300px;background-attachment: fixed;
}
![Page 51: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/51.jpg)
12/05/15 © P C F de Oliveira 2015 51
scroll
fixed
inherit
![Page 52: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/52.jpg)
12/05/15 © P C F de Oliveira 2015 52
Exemplo
<!DOCTYPE html><html><head>
<style> body {
background-image: url(“bigstar.png");background-repeat: no-repeat;background-attachment: fixed;
}</style>
</head><body>
<p>A imagem de fundo (background-image) estáfixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) estáfixa. Tente rolar a página.</p>
Continua no próximo slide…
![Page 53: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/53.jpg)
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
12/05/15 © P C F de Oliveira 2015 53
Exemplo
Continuação do slide anterior
![Page 54: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/54.jpg)
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
12/05/15 © P C F de Oliveira 2015 54
Exemplo
Continuação do slide anterior
![Page 55: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/55.jpg)
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>Caso você não veja a barra de rolagem, tenteredimensionar a janela do browser.</p></body></html>
12/05/15 © P C F de Oliveira 2015 55
Exemplo
Continuação do slide anterior
![Page 56: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/56.jpg)
12/05/15 © P C F de Oliveira 2015 56
Resultado
![Page 57: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/57.jpg)
12/05/15 © P C F de Oliveira 2015 57
background
Coloca todas
propriedades em uma
regra
body { background: black url(ario.jpg) no-repeat right top fixed; }
body { background-color: black;background-image: url(ario.jpg);background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}
![Page 58: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/58.jpg)
12/05/15 © P C F de Oliveira 2015 58
image
repeat
attachment
color
inherit
position
Ordem
NÃO é
importante
![Page 59: Aula 9 Cores backgrounds - blogdoprofpc.files.wordpress.com · Prof. Paulo Cesar F. De Oliveira, ... Continuação do slide anterior. ... A imagem de fundo (background-image)](https://reader031.fdocuments.net/reader031/viewer/2022011806/5be659aa09d3f2ea1a8cf85f/html5/thumbnails/59.jpg)
12/05/15 © P C F de Oliveira 2015 59
Atenção
Propriedade position: Se for fornecida, valor horizontal deve vir primeiro