0
Так что в основном, фоны моих изображений более легкие, чем фактическое изображение. И когда я пытаюсь что-то с ними сделать, например, увеличивая или искажая их, фон изображения (а не фактическое изображение) выходит за границы веб-страницы. Вот пример, от .smPicsContainer.Фон изображения больше фактического изображения
Как вы можете видеть зеленую линию является фоном логотипа BMW. Мой вопрос в том, есть ли способ изменить размер фона, чтобы он соответствовал фактическому изображению (логотип BMW). Вот что я DonT до сих пор:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cars</title>
<link href="styles/index.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class ="navbar">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="logoIMG" alt="Brand" src="images/brand.png">
</a>
</div>
<div class="navMenu">
<ul class="menuItems">
<li><a href="#">Cunt</a></li>
<li><a href="#">Noob</a></li>
<li><a href="#">Butt</a></li>
<li><a href="#">GoBack</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div class="content">
<!-- big pics-->
<div class="picsContainer" id="cont">
<ul class="pics">
<li class="pic01" id="pic1"><img src="images\bmw3.jpg" alt=""></li>
<li class="pic02" id="pic2"><img src="images\audi2.jpg" alt=""></li>
<li class="pic03" id="pic3"><img src="images\porsche2.jpg" alt=""></li>
</ul>
</div>
<!-- small pics-->
<div class="smPicsContainer">
<ul class="smPics">
<li class="smPic1" id="pic4"><img src="images\BMWlogo2.png" alt=""></li>
<li class="smPic2" id="pic5"><img src="images\audiLogo.png" alt=""></li>
<li class="smPic3" id="pic6"><img src="images\porscheLogo.png" alt=""></li>
</ul>
</div>
</div>
<script src="jquery\jquery.js"></script>
<script>
$(function() {
$('#pic1').mouseenter(function() {
$('#pic1').css("cursor", "pointer");
$('#pic1').fadeTo("fast", 0.5);
$('#pic4').animate({width: "40%", height: "40%"}, 'fast')
});
$('#pic1').mouseleave(function() {
$('#pic1').css("cursor", "pointer");
$('#pic1').fadeTo("fast", 1);
$('#pic4').css("cursor", "pointer");
$('#pic4').animate({width: "28%", height: "28%"}, 'fast')
});
$('#pic2').mouseenter(function() {
$('#pic2').css("cursor", "pointer");
$('#pic2').fadeTo("fast", 0.5);
$('#pic5').animate({width: "50%", height: "50%"}, 'fast')
});
$('#pic2').mouseleave(function() {
$('#pic2').css("cursor", "pointer");
$('#pic2').fadeTo("fast", 1);
$('#pic5').css("cursor", "pointer");
$('#pic5').animate({width: "28%", height: "28%"}, 'fast')
});
$('#pic3').mouseenter(function() {
$('#pic3').css("cursor", "pointer");
$('#pic3').fadeTo("fast", 0.5);
$('#pic6').animate({width: "50%", height: "50%"}, 'fast')
});
$('#pic3').mouseleave(function() {
$('#pic3').css("cursor", "pointer");
$('#pic3').fadeTo("fast", 1);
$('#pic6').css("cursor", "pointer");
$('#pic6').animate({width: "28%", height: "28%"}, 'fast')
});
});
</script>
</body>
</html>
styles.css
body{
background: linear-gradient(rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7)), url('../images/bgrIMG.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
header {
width: auto;
margin: 0;
}
#bg {
background:url('../images/bgrIMG.jpg') no-repeat center center;
height: 500px;
}
.navbar {
width: auto;
min-height: 50px;
min-width: 150px;
margin-bottom: 20px;
border: 1px solid transparent;
margin: 0;
}
.navbar-inverse {
background-color: #222;
border-color: #080808;
}
.navbar-inverse .navbar-brand {
color: #858585;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
.navbar-header {
margin: 0;
background: white;
}
.navbar-brand {
float: left;
height: 10px;
padding: 10px;
}
.navbar-brand .logoIMG {
float: left;
position: absolute;
top: 0.6%;
padding: 0;
height: auto;
}
.logoIMG:hover {
transition: all 1s ease;
transform:scale(1.25);
}
.navMenu {
float: right;
}
.navMenu .menuItems {
font-family: BebasBold;
margin: 0;
line-height: 48px;
}
.menuItems a {
text-decoration: none;
font-size: 25px;
color: #444;
display: block;
padding: 0px;
margin: 0 20px;
}
.menuItems li {
display: inline-block;
text-transform: uppercase;
margin: 0 20px;
transition: background 0.2s;
}
.menuItems li:hover {
transition: all 0.3s ease;
border-bottom: solid #321DF2;
}
.menuItems a:hover {
transition: all 0.3s ease;
color: #999;
}
.content {
width: 100%;
min-width: 5%;
}
.content .picsContainer {
height: 20%;
position: relative;
background: black;
}
.content #cont {
width: 100%;
height: 200px;
}
.content #cont .pics{
display:inline-block;
width: 100%;
margin: 0;
padding: 0;
}
.content #cont .pic01 {
float: left;
position: absolute;
list-style-type: none;
width: 33.3%;
height: 100%;
}
.content #cont .pic02 {
float: left;
position: absolute;
list-style-type: none;
width: 33.3%;
left: 33.3%;
height: 100%;
}
.content #cont .pic03 {
float: right;
position: absolute;
list-style-type: none;
width: 33.3%;
left:66.6%;
height: 100%;
}
.content .picsContainer img {
width: 100%;
}
.content .smPicsContainer {
margin: 0 auto;
position: absolute;
height: 50px;
width: 100%;
top: 4.5%;
}
.content .smPicsContainer .smPic1 {
background-size: cover;
wight: 10%;
position: absolute;
display: block;
float: left;
list-style-type: none;
padding: 0;
}
.content .smPic2 {
position: absolute;
float: left;
left: 35%;
list-style-type: none;
}
.content .smPic3 {
position: absolute;
display: block;
float: left;
list-style-type: none;
left: 70%;
}
.content .smPicsContainer img{
width: 15%;
}
@font-face {
font-family: 'BebasBold';
font-weight: bold;
src: url("../fonts/BebasNeue Bold.otf");
}
@media only screen and (min-width: 150px) and (max-width: 600px){
.navbar {
min-height: 230px;
}
.navbar-brand img {
display: none;
}
.navMenu .menuItems {
height: 172px;
}
.menuItems li {
width: 100%;
top: 0.1%;
display: block;
text-align: center;
float: right;
}
.content #cont .pic {
float: left;
list-style-type: none;
width: 100%;
height: 300px;
}
}
я предоставлю дополнительную информацию, если это необходимо. Имейте в виду, я довольно новичок в веб-разработке. Заранее благодарю за ваше время.
Вам необходимо опубликовать CSS для '' element и его дочерних элементов, так как, скорее всего, у вас есть тот зеленый фон –
LGSon
Done. Я редактировал сообщение. – Cr1ms0nStraY
у вас есть дополнительный ' "'здесь ' <ссылка HREF =" стили/"отн = "" Тип = "index.css стилей текст/CSS""/>' должно быть так: '< link href = "styles/index.css" rel = "stylesheet" type = "text/css" /> ' – dippas