{"id":501,"date":"2020-07-02T20:44:59","date_gmt":"2020-07-02T23:44:59","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=501"},"modified":"2022-12-09T08:37:31","modified_gmt":"2022-12-09T11:37:31","slug":"fundos-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/fundos-css\/","title":{"rendered":"Fundos CSS"},"content":{"rendered":"

As propriedades de segundo plano do CSS s\u00e3o usadas para definir os efeitos de segundo plano para os elementos.<\/p>\n

Nesses cap\u00edtulos, voc\u00ea aprender\u00e1 sobre as seguintes propriedades de segundo plano do CSS:<\/p>\n

cor de fundo
\nimagem de fundo
\nfundo de repeti\u00e7\u00e3o
\nanexo de fundo
\nposi\u00e7\u00e3o de fundo<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  background-color: lightblue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Ola mundo!<\/h1>\r\n\r\n<p>Esta pagina tem uma cor leve!<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Com CSS, uma cor \u00e9 mais frequentemente especificada por:<\/p>\n
um nome de cor v\u00e1lido – como “vermelho”
\num valor HEX – como “# ff0000”
\num valor RGB – como “rgb (255,0,0)”
\nConsulte Valores de cores CSS para obter uma lista completa dos poss\u00edveis valores de cores.<\/p>\n
Outros elementos
\nVoc\u00ea pode definir a cor do plano de fundo para qualquer elemento HTML:<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  background-color: green;\r\n}\r\n\r\ndiv {\r\n  background-color: lightblue;\r\n}\r\n\r\np {\r\n  background-color: yellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>CSS cor fundo<\/h1>\r\n<div>\r\nTexto do elemento\r\n<p>este par\u00e1grafo com cor.<\/p>\r\nOutro elemento\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
Opacidade \/ Transpar\u00eancia<\/strong>
\nA opacitypropriedade especifica a opacidade \/ transpar\u00eancia de um elemento. Pode assumir um valor de 0,0 – 1,0. Quanto menor o valor, mais transparente:<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  background-color: green;\r\n}\r\n\r\ndiv.first {\r\n  opacity: 0.1;\r\n}\r\n\r\ndiv.second {\r\n  opacity: 0.3;\r\n}\r\n\r\ndiv.third {\r\n  opacity: 0.6;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Transparente<\/h1>\r\n<p>Ao\u00a0usar\u00a0a\u00a0propriedade\u00a0opacity\u00a0para\u00a0adicionar\u00a0transpar\u00eancia\u00a0ao\u00a0plano\u00a0de\u00a0fundo\u00a0de\u00a0um\u00a0elemento,\u00a0todos\u00a0os\u00a0seus\u00a0elementos\u00a0filhos\u00a0tamb\u00e9m\u00a0se\u00a0tornam\u00a0transparentes.\u00a0<\/span>Isso\u00a0pode\u00a0dificultar\u00a0a\u00a0leitura\u00a0do\u00a0texto\u00a0dentro\u00a0de\u00a0um\u00a0elemento\u00a0totalmente\u00a0transparente:<\/span><\/p>\r\n\r\n<div class=\"first\">\r\n  <h1>opacity 0.1<\/h1>\r\n<\/div>\r\n\r\n<div class=\"second\">\r\n  <h1>opacity 0.3<\/h1>\r\n<\/div>\r\n\r\n<div class=\"third\">\r\n  <h1>opacity 0.6<\/h1>\r\n<\/div>\r\n\r\n<div>\r\n  <h1>opacity 1 (default)<\/h1>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
Nota: Ao usar a opacity propriedade para adicionar transpar\u00eancia ao plano de fundo de um elemento, todos os seus elementos filhos herdam a mesma transpar\u00eancia. Isso pode dificultar a leitura do texto dentro de um elemento totalmente transparente.<\/span><\/p>\n
 <\/p>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n