non compare il mio background

StackOverflow https://stackoverflow.com/questions/2351010

  •  23-09-2019
  •  | 
  •  

Domanda

Per qualche motivo non appare sullo sfondo.

Questo è il CSS 

div.sidebar_beige {
background: no-repeat left top;
height: 142px;
margin: 35px 0 35px 0;
position: relative;}

div.sidebar_beige h3 {
    color: #f57f20;
    font-family: 'trebuchet ms';
    font-size: 17px;
    left: 15px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 15px;
    width: 163px;
}
div.sidebar_beige p {
color: #454343;
font-family: 'trebuchet ms';
font-size: 12px;
left: 15px;
margin: 0px;
padding: 0px;
position: absolute;
top: 42px;
width: 165px;}

div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

Questo è il codice HTML utilizzato: 

<div class="sidebar_lap sidebar_beige">
            <h3>
              Laptop Reparatie
            </h3>
            <p>

              U kan niet gelijk een nieuwe<br />
            laptop kopen? <br />
            We zijn de goedkoopste<br />
            van Friesland.
            </p>
          </div>
È stato utile?

Soluzione

È possibile utilizzare l'ordine delle sostituzioni a vostro vantaggio qui:

Fare la copied.css sufficiente includere: 

div.sidebar_beige_lap {
  background: url('../images/sidebar_backup_laptoprepara.png') no-repeat left top;
}

Nella pagina, includerli in ordine: 

<link rel="stylesheet" href="original.css" />
<link rel="stylesheet" href="copied.css" />

Qualsiasi proprietà sovrascritti in copied.css vinceranno, altrimenti oggetti di original.css sono ereditate.

Altri suggerimenti

Se possibile, il modo migliore è quello di dare ad ogni pagina di una classe e / o ID univoco o utile sull'elemento corpo. Così, solo per fare un esempio, una pagina è: 

<body class="bg-custom">

e un altro è 

<body class="bg-custom-right">

Poi nel CSS è possibile modificare in questo modo: 

.bg-custom #selector { background-img: url(...);}
.bg-custom-right #selector { background-img: url(...);}

dove #selector è l'elemento che si desidera modificare in ogni pagina - ma senza dover rinunciare ognuno è proprio nuovo (copiate) regole di stile o il nome (s) di classe, rendendo il più pulito CSS e HTML e più facile da mantenere . (Come bonus, se c'è qualcos'altro è necessario usare lo stesso trucco su per la modifica per-page, è possibile farlo.)

utilizzare due classi sul div: 

<div class="sidebar lap">...

Estrarre il bg mago fuori della classe barra laterale in modo che tutti i div puoi condividerle. Il set up di una nuova classe per ogni bg diversa è necessario (LPA, FCS, ecc) che contiene solo l'immagine bg.

La tua immagine di sfondo è sulla classe sidebar_lap.

Nel codice HTML si utilizza sidebar_beige_lap

Cambia il codice HTML per 

<div class="sidebar_lap sidebar_beige">

Utilizzando multipla assegnazione classi CSS:

HTML FCS: 

<div class="sidebar_fcs sidebar_beige">...</div>

HTML LAP: 

<div class="sidebar_lap sidebar_beige">...</div>

Singolo CSS: 

div.sidebar_beige {
 background: no-repeat left top;
 height: 142px;
 margin: 35px 0 35px 0;
 position: relative;
}
div.sidebar_beige h3 {
 color: #f57f20;
 font-family: 'trebuchet ms';
 font-size: 17px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 15px;
 width: 163px;
}
div.sidebar_beige p {
 color: #454343;
 font-family: 'trebuchet ms';
 font-size: 12px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 42px;
 width: 165px;
}
div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top