CSS изменение размера изображения - PullRequest
Новая
       6

CSS изменение размера изображения

3 голосов
/ 20 июля 2010

У меня есть этот код CSS: 

<style>
     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     width:100%;
     height:100%;
     }
</style>

Когда я читал в сети, я ожидал, что это изменит фоновое изображение и поместит его в окно браузера.,Я думаю, что я, очевидно, делаю что-то не так (я не знаю достаточно CSS).Любые советы?

ОБНОВЛЕНИЕ:

Я добавляю пример отверстия (не работает): 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
     body {
     position:absolute;
     background-image:url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }
</style>
</head>
<body >
</body>
</html>

Ответы [ 5 ]

6 голосов
/ 20 июля 2010

добавить свойство background-repeat.

готовый код должен выглядеть следующим образом: 

     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }
2 голосов
/ 27 декабря 2012

Используя css3, вы можете изменить размер изображения в перспективе, 

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Это работает во всех браузерах и ie9 +.Следующие фильтры также работают в ie7 и ie8. 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
2 голосов
/ 20 июля 2010

Если вы собираетесь использовать этот браузер в разных браузерах, вам лучше поместить изображение на страницу, а затем обернуть весь ваш контент в DIV, который находится сверху. Э.Г.

CSS 

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  z-index: 1;
}

Если вы планируете поддерживать IE6, добавьте этот фрагмент: 

<!--[if IE 6]>
  <style type="text/css">
    html {
      overflow-y: hidden;
    }

    body {
      overflow-y: auto;
    }

    #background {
      position:absolute;
      z-index:-1;
    }

    #content {
      position:static;
    }
  </style>
<![endif]-->

HTML 

<img id="background" src="art/c11.jpg" alt="" />

<div id="content">
  Your content
</div>

Код в действии.

2 голосов
/ 20 июля 2010

Я не думаю, что есть способ растянуть или контролировать размер фонового изображения с помощью CSS. Однако вы можете использовать атрибуты background-position , background-attachment и background-repeat для достижения альтернативного результата.

или вы можете использовать JavaScript, поместив Image в нижний слой z-index и установить слой в качестве фонового рисунка, однако это будет немного взломать

1 голос
/ 20 июля 2010

Вы можете использовать свойство CSS3 background-size:100%, но поддержка этого свойства еще не распространена и не будет работать в старых браузерах. Чтобы добиться того, что вы хотите, вам нужно несколько хаков, чтобы заставить его работать. Есть несколько блогов, подобных этому one , которые покажут вам, что вам нужно делать. Я не рекомендую делать это, так как если у вас большое изображение / медленное соединение, вы увидите загрузку изображения. Если изображение не самого лучшего качества, оно будет выглядеть не очень хорошо, растянутое по экрану или в другом разрешении.

...