CSS: arka plan renginde arka plan resmi

169

Bu panel seçiliyse (üzerine tıklanırsa) mavi renklendirdiğim panelim var. Ayrıca, .pngo panele, seçilen panelin daha önce seçilmiş olduğunu gösteren küçük bir işaret ( resim) ekliyorum .

Kullanıcı örneğin 10 panel görürse ve 4 tanesi bu küçük işarete sahipse, daha önce bu panelleri tıkladığını bilir. Bu iş şimdiye kadar iyi. Sorun şu ki, küçük işareti görüntüleyemiyorum ve paneli aynı anda mavi yapamıyorum.

Paneli css background: #6DB3F2;ve arka plan görüntüsü ile maviye ayarladım background-image: url('images/checked.png'). Ancak arka plan rengi görüntünün üzerinde olduğu için işareti göremiyorsunuz.

Bu nedenle z-indexarka plan rengi ve arka plan görüntüsü için es ayarlamak mümkün müdür ?

— mkn
kaynak

290

Her biri için tam mülk adını kullanmanız gerekir:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Veya arka plan stilini kullanabilir ve hepsini tek bir satırda belirtebilirsiniz:

background: url('images/checked.png'), #6DB3F2;

— vurguncu
kaynak

7

1. yöntem benim için işe yaramadı. 2., steno yöntemi mükemmel çalışıyor.

— Steve Breese

1

Güvenli olmayan stil değeri

— Nexeuz

@Nexeuz Neden bu stil sözdizimini güvensiz Nexeuz olarak düşünüyorsun?

— Webwoman

31

Benim için bu çözüm işe yaramadı:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Ama bunun yerine başka bir şekilde çalıştı:

<div class="block">
<span>
...
</span>
</div>

css:

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

— Francisc Aknai
kaynak

2

Francisc kodu için teşekkürler !! Dediği gibi, arka plan rengine ve görüntüye katılmak sorunu benim için de çözmedi. Bu yardım ve kodumdaki küçük değişiklikler ile sorunu çözmeyi başardım.

— Mikel

17

Arka planda Siyah Gölge Oluşturmak istiyorsanız, aşağıdakileri kullanabilirsiniz:

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

— Risa__B
kaynak

5

Dayanarak MDN Web Dokümanlar Eğer stenografi kullanarak birden arka plan ayarlayabilirsiniz backgroundözelliği veya hariç bireysel özelliklerinibackground-color . Sizin durumunuzda, bu şekilde kullanarak bir numara yapabilirsiniz linear-gradient:

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

Parametredeki ilk öğe (resim) üstüne konulur. İkinci öğe (renkli arka plan) birincinin altına konacaktır. Diğer özellikleri ayrı ayrı da ayarlayabilirsiniz. Örneğin, görüntü boyutunu ve konumunu ayarlamak için.

background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;

Bu yöntemin avantajı, diğer durumlar için kolayca uygulayabilmenizdir, örneğin, görüntüyü belirli bir opaklıkla kaplayan mavi rengi yapmak istersiniz.

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;

Bireysel özellik parametreleri sırasıyla ayarlanır. Görüntü renk kaplamasının altına yerleştirildiği için, özellik parametreleri de renk kaplaması parametrelerinden sonra yerleştirilir.

— Luki B. Subekti
kaynak

2

Gerçekten ilginç bir sorun, henüz görmedim. bu kod benim için iyi çalışıyor. krom ve IE9'da test etti

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

— Ramzi Khahil
kaynak

2

Ayrıca görüntü ve renk kullanmak için kısa hileyi kullanabilirsiniz: -

body {
     background:#000 url('images/checked.png');
 }

— Kesar Sisodiya
kaynak

1

Bu aslında benim için çalışıyor:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Ayrıca düz bir gölge bırakabilir ve arka plan resmini ayarlayabilirsiniz:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

İlk seçenek bir nedenden dolayı çalışmıyorsa ve kutu gölgesini kullanmak istemiyorsanız, görüntü için her zaman fazladan HTML olmadan sahte bir öğe kullanabilirsiniz:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— Fernán García de Zúñiga
kaynak

0

İşte renkli düğmelerimi arka planda bir simgeyle şekillendirdim

Renk için "arka plan rengi" özelliğini ve görüntü için "arka plan" özelliğini kullandım.

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

— Da Acemi
kaynak

-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

Diğer Örnek Kutu Merkezi Görüntü ve Arka Plan Rengi

1. ilk clearpixel düzeltme görüntü alanı 2. stil merkezi görüntü alanı kutusu 3. li arka plan veya div renk stili

— ALPC
kaynak

2

Başka bir makul seçenek varsa satır içi CSS uygun değildir.

— Jon Mitten

-10

body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}

— Vikash pathak
kaynak