Obrazy tła: jak wypełnić cały div, jeśli obraz jest mały i odwrotnie

Mam trzy problemy:

  1. Kiedy próbowałem użyć obrazu tła w mniejszym rozmiarze div, div pokazuje tylko część obrazu. Jak mogę pokazać całą lub określoną część obrazu?

  2. Mam mniejszy obraz i chcę użyć w większym div. Ale nie chcę używać funkcji powtarzania.

  3. Czy w CSS można manipulować przezroczystością obrazu?

Author: David Cain, 2011-01-24
Source

7 answers

Zmień rozmiar obrazu, aby pasował do rozmiaru div.
Z CSS3 możesz to zrobić: 

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

Jak rozciągnąć obraz tła na stronie internetowej :

O nieprzezroczystości 

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Lub spójrz na krycie / przezroczystość obrazu CSS

 100
Author: yossi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-12 12:55:36

Aby automatycznie powiększyć obraz i pokryć całą sekcję div, nie pozostawiając żadnej jego części niewypełnionej, użyj: 

background-size: cover;
 61
Author: Ouadie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-10 12:06:47

Spróbuj poniżej segmentu kodu, sam próbowałem wcześniej :

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}
 9
Author: Behnia Esmailian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-09 00:25:06

Zamiast dawać background-size:100%;
możemy dać background-size:contain;
Sprawdź to dla różnych opcji dostępnych: http://www.css3.info/preview/background-size/

 8
Author: vivekj011,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-22 07:35:14

To działało idealnie dla mnie 

background-repeat: no-repeat;
background-size: 100% 100%;
 4
Author: Dnyaneshwar Harer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-05 10:27:23

To zadziała jak urok.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
 1
Author: Jayanta Biswas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-26 11:28:41

  1. Zgadzam się z przykładem yossi, rozciągnij obrazek, aby pasował do div, ale w nieco inny sposób (bez tła-obrazu, ponieważ jest to trochę nieelastyczne w css 2.1). Pokaż pełny obraz: 

    <div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}

  2. Pokaż część obrazu używając background-position: 

    #yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

  3. Tak samo jak pierwsza część (1) obraz będzie skalowany do div, więc większy lub mniejszy będzie działał

  4. Tak samo jak yossi.

 0
Author: Bazzz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-19 22:25:56