Почему internet explorer обрезает края фона при растягивании, как исправить?

Question

Сергей Игнатьев @serebro223

CSS

Почему internet explorer обрезает края фона при растягивании, как исправить?

Здравствуйте. При растягивании фона по центру, ie обрезает края, в нормальных браузерах это не наблюдается. Подскажите, как исправить (нужно не фиксированное положение фона)?

<body>
 <div class="window bg"></div>
</body>


.bg {
       background: url(../../assets/images/fons/bg.svg) no-repeat center center ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.window {
    position: relative;
    width: 95%;
    min-height: 98vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vh;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #000000;
    min-width: 1200px;
}

Вопрос задан более трёх лет назад
263 просмотра

16 комментариев

Подписаться 1 Простой 16 комментариев

Rustam Bainazarov @SmthTo Куратор тега CSS

Какой IE? Выложите код кашего SVG.

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Либо же попробуйте сделать CSS-градиентом, в данном случае это реально.

Написано более трёх лет назад
Сергей Игнатьев @serebro223 Автор вопроса

SmthTo, к сожалению, это не подходит. У меня сверху будут svg изображения, которые должны ложится именно на этот фон. В этом проблема.

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Сергей Игнатьев, это тоже можно спокойно реализовать с помощью CSS, фоновые картинки можно комбинировать в одном правиле через запятую:
htmlbook.ru/css3-na-primerakh/neskolko-fonovykh-ri...

Да и абсолютно позиционированные блоки тоже никто не отменял.

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Сергей Игнатьев, присылайте ваш SVG, проблема в нём. Не файл, а код просто SVG выложите.

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Сергей Игнатьев, и какая версия IE?

Написано более трёх лет назад
Сергей Игнатьев @serebro223 Автор вопроса

SmthTo, Я добавил разметку к вопросу, посмотрите пожалуйста. Спасибо за совет, сейчас попробую jpg растянуть по этому методу.

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Сергей Игнатьев, откройте ваш SVG в редакторе кода и пришлите его сюда.

Вообще, такой простой градиент на JPG и даже SVG делать не надо.

Написано более трёх лет назад

Сергей Игнатьев @serebro223 Автор вопроса

Спасибо большое, что помогли решить проблему. png спокойно растягивается.

А код svg вот :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve">
<style type="text/css">
	.st0{fill:url(#SVGID_1_);}
</style>
<g id="bg">
	<g>
		<g>
			
				<radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse">
				<stop  offset="1.075270e-02" style="stop-color:#2C35A2"/>
				<stop  offset="0.1635" style="stop-color:#252C88"/>
				<stop  offset="0.3975" style="stop-color:#1B2167"/>
				<stop  offset="0.621" style="stop-color:#15194F"/>
				<stop  offset="0.8273" style="stop-color:#101540"/>
				<stop  offset="1" style="stop-color:#0F133B"/>
			</radialGradient>
			<rect y="0.3" class="st0" width="750.3" height="450"/>
		</g>
	</g>
</g>
</svg>

Написано более трёх лет назад

Сергей Игнатьев @serebro223 Автор вопроса

SmthTo, Не могу поставить "ответ" на ваш комментарий) Если вы собираете ответы, напишите пожалуйста ответом, что IE не может растягивать svg)

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Сергей Игнатьев, через полчаса напишу, доберусь до IE11. Выложу SVG.

Написано более трёх лет назад
Сергей Игнатьев @serebro223 Автор вопроса

Подскажите пожалуйста, есть сервис который переведет в css градиент этот svg?

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS
Сергей Игнатьев, ну а предварительно попробуйте добавить вот это в тег SVG:
width="750.3" height="450" preserveAspectRatio="none slice"
Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Сергей Игнатьев, сервис не знаю, вручную — 1 минута. Сделаю и это вам, подождите только.

Написано более трёх лет назад
RAX7 @RAX7

Сергей Игнатьев, иллюстратор умеет css градиенты генерировать

Нужно только чуть-чуть вручную поправить
https://jsfiddle.net/hprb2y5t/1/

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

RAX7, да, вполне нормальный CSS-код.

Написано более трёх лет назад

Либо же попробуйте сделать CSS-градиентом, в данном случае это реально.
SmthTo, к сожалению, это не подходит. У меня сверху будут svg изображения, которые должны ложится именно на этот фон. В этом проблема.
Сергей Игнатьев, это тоже можно спокойно реализовать с помощью CSS, фоновые картинки можно комбинировать в одном правиле через запятую:
htmlbook.ru/css3-na-primerakh/neskolko-fonovykh-ri...

Да и абсолютно позиционированные блоки тоже никто не отменял.
Сергей Игнатьев, присылайте ваш SVG, проблема в нём. Не файл, а код просто SVG выложите.
Сергей Игнатьев, и какая версия IE?
SmthTo, Я добавил разметку к вопросу, посмотрите пожалуйста. Спасибо за совет, сейчас попробую jpg растянуть по этому методу.
Сергей Игнатьев, откройте ваш SVG в редакторе кода и пришлите его сюда.

Вообще, такой простой градиент на JPG и даже SVG делать не надо.
Спасибо большое, что помогли решить проблему. png спокойно растягивается.

А код svg вот :

<?xml version="1.0" encoding="utf-8"?>  <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} </style> <g id="bg"> <g> <g> <radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse"> <stop offset="1.075270e-02" style="stop-color:#2C35A2"/> <stop offset="0.1635" style="stop-color:#252C88"/> <stop offset="0.3975" style="stop-color:#1B2167"/> <stop offset="0.621" style="stop-color:#15194F"/> <stop offset="0.8273" style="stop-color:#101540"/> <stop offset="1" style="stop-color:#0F133B"/> </radialGradient> <rect y="0.3" class="st0" width="750.3" height="450"/> </g> </g> </g> </svg>
SmthTo, Не могу поставить "ответ" на ваш комментарий) Если вы собираете ответы, напишите пожалуйста ответом, что IE не может растягивать svg)
Сергей Игнатьев, через полчаса напишу, доберусь до IE11. Выложу SVG.
Подскажите пожалуйста, есть сервис который переведет в css градиент этот svg?
Сергей Игнатьев, ну а предварительно попробуйте добавить вот это в тег SVG:
width="750.3" height="450" preserveAspectRatio="none slice"
Сергей Игнатьев, сервис не знаю, вручную — 1 минута. Сделаю и это вам, подождите только.
Сергей Игнатьев, иллюстратор умеет css градиенты генерировать

Нужно только чуть-чуть вручную поправить
https://jsfiddle.net/hprb2y5t/1/

Answer 1 · 2019-01-09 22:53:06

Как и говорил, проблема в SVG:

Нужно было добавить в тег svg:

width="750.3" height="450" preserveAspectRatio="none slice"

Полный код SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve" width="750.3" height="450" preserveAspectRatio="none slice">
<style type="text/css">
  .st0{fill:url(#SVGID_1_);}
</style>
<g id="bg">
  <g>
    <g>
      
        <radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse">
        <stop  offset="1.075270e-02" style="stop-color:#2C35A2"/>
        <stop  offset="0.1635" style="stop-color:#252C88"/>
        <stop  offset="0.3975" style="stop-color:#1B2167"/>
        <stop  offset="0.621" style="stop-color:#15194F"/>
        <stop  offset="0.8273" style="stop-color:#101540"/>
        <stop  offset="1" style="stop-color:#0F133B"/>
      </radialGradient>
      <rect y="0.3" class="st0" width="750.3" height="450"/>
    </g>
  </g>
</g>
</svg>

Либо же cделать градиент на CSS, тем более такой простой.

Почему internet explorer обрезает края фона при растягивании, как исправить?

Войдите на сайт