使用 CSS 混合或裁剪图像，以便只有设置的高度会显示在背景图像上
Mash or crop image with CSS so that only set height will be shown on a background image
我使用 CSS 在 Div 上设置了背景图片，如下图所示。
我的问题是我需要图像是 parnet 的全宽 Div 并且图像高度是它的自然全高但是我需要 crop/mask 图像的高度所以它仅在 155px 左右可见。所以即使图片有300px的高度，也只会显示155px。
这是否可能 CSS 或者我是否需要调整实际图像文件的大小？
演示：https://jsfiddle.net/m5dq6akj/1/
<section class="recent-projects-section">
<h1 class="recent-projects-section-heading">Recent Projects</h1>
<p class="recent-projects-section-body">View our portfolio of some recent projects we have worked on for inspiration and to see our capabilities.</p>
<div class="recent-projects-container">
<div class="recent-project zpanel" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2014/05/zpanel-Dashboard-300x206.png);">
<h1 class="recent-projects-heading">Los Angeles</h1>
<p class="recent-projects-body">Being at the corner of technology and entertainment keeps SitePoint relevant and cutting edge.</p>
</div>
<div class="recent-project fastnfurriest" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2014/07/fastnfurriest-com-300x486.png);">
<h1 class="recent-projects-heading">San Francisco</h1>
<p class="recent-projects-body">The Hub of Technology and the home of our current and future partners enables us to stay on top of information and innovation.</p>
</div>
<div class="recent-project project-man-gantt" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2015/03/project-management-module-gantt-300x201.png);">
<h1 class="recent-projects-heading">Melbourne</h1>
<p class="recent-projects-body">Melbourne's growing tech community is where our seasoned developers and designers create the SitePoint magic.</p>
</div>
</div>
</section>
CSS
section.recent-projects-section {
min-height: 770px;
/* background: url(http://apollowebstudio.dev/assets/img/world-map-blue.png) left top no-repeat; */
background: url(http://apollowebstudio.dev/assets/img/world-map-trans.png) left top no-repeat #3BB2D0;
background-size: cover;
}
section.recent-projects-section {
position: relative;
display: block;
text-align: center;
width: 100%;
padding: 0;
color: #424242;
margin-top: -1.3em;
}
.recent-projects-section-heading {
color: #fff;
padding-top: 2.5em;
}
@media only screen and (min-width: 820px) {
section.recent-projects-section>h1 {
width: 60%;
}
}
section.recent-projects-section h1 {
font-size: 1.82em;
font-style: normal;
font-weight: 700;
line-height: 1.16em;
padding-top: 2.5em;
margin-left: auto;
margin-right: auto;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section.recent-projects-section p {
text-align: center;
font-size: 1.1em;
font-weight: 400;
line-height: 1.3em;
color: #777;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section p.recent-projects-section-body {
color: #fff;
width: 50%;
font-size: 1.4em;
margin: 0 auto;
}
.recent-projects-container {
width: 75%;
margin: 0 auto;
padding-top: 4.1em;
padding-bottom: 2em;
}
.recent-project {
position: relative;
display: inline-block;
vertical-align: top;
width: 250px;
min-height: 400px;
border-radius: 10px;
background: #fff left top no-repeat;
padding: 2em 0 0;
margin-top: 2em;
}
section.recent-projects-section h1.recent-projects-heading {
text-align: left;
font-size: 2em;
font-weight: 400;
padding: 5em 0 0 .8em;
line-height: 1.16em;
}
.recent-projects-body {
text-align: left;
font-size: 1.2em;
font-weight: 400;
width: 80%;
margin: 0 auto;
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
@media only screen and (min-width: 621px) {
.recent-project+.recent-project {
margin-left: 1em;
}
}
@media only screen and (min-width: 820px) {
.recent-project+.recent-project {
margin-left: 2em;
}
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
添加 section .recent-projects-section { background-size: 100% } 而不是 background-size: cover
您可以使用从透明（清晰或模糊）到背景颜色到图像 hide/crop 部分的渐变。
裁剪设置为 185 像素的示例 （我让您重置为 155 像素以确保您了解它是如何工作的；）） 或从 165 像素模糊到 205 像素。
/* set your background here for demo and readability */
.zpanel {
background-image:linear-gradient( to bottom , transparent 185px, white 185px), url(http://lorempixel.com/400/200/city/3);
}
/* add even blurr on cropping ? */
.fastnfurriest {
background-image: linear-gradient( to bottom , transparent 165px, white 205px), url(http://lorempixel.com/400/300/city/4);
}
.project-man-gantt {
background-image: linear-gradient( to bottom , transparent 185px, white 185px), url(http://lorempixel.com/400/200/city/5)
}
/* end demo multiple bg */
section.recent-projects-section {
min-height: 770px;
/* background: url(http://apollowebstudio.dev/assets/img/world-map-blue.png) left top no-repeat; */
background: url(http://apollowebstudio.dev/assets/img/world-map-trans.png) left top no-repeat #3BB2D0;
background-size: cover;
}
section.recent-projects-section {
position: relative;
display: block;
text-align: center;
width: 100%;
padding: 0;
color: #424242;
margin-top: -1.3em;
}
.recent-projects-section-heading {
color: #fff;
padding-top: 2.5em;
}
@media only screen and (min-width: 820px) {
section.recent-projects-section>h1 {
width: 60%;
}
}
section.recent-projects-section h1 {
font-size: 1.82em;
font-style: normal;
font-weight: 700;
line-height: 1.16em;
padding-top: 2.5em;
margin-left: auto;
margin-right: auto;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section.recent-projects-section p {
text-align: center;
font-size: 1.1em;
font-weight: 400;
line-height: 1.3em;
color: #777;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section p.recent-projects-section-body {
color: #fff;
width: 50%;
font-size: 1.4em;
margin: 0 auto;
}
.recent-projects-container {
width: 75%;
margin: 0 auto;
padding-top: 4.1em;
padding-bottom: 2em;
}
.recent-project {
position: relative;
display: inline-block;
vertical-align: top;
width: 250px;
min-height: 400px;
border-radius: 10px;
padding: 2em 0 0;
margin-top: 2em;
}
section.recent-projects-section h1.recent-projects-heading {
text-align: left;
font-size: 2em;
font-weight: 400;
padding: 5em 0 0 .8em;
line-height: 1.16em;
}
.recent-projects-body {
text-align: left;
font-size: 1.2em;
font-weight: 400;
width: 80%;
margin: 0 auto;
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
@media only screen and (min-width: 621px) {
.recent-project+.recent-project {
margin-left: 1em;
}
}
@media only screen and (min-width: 820px) {
.recent-project+.recent-project {
margin-left: 2em;
}
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
<section class="recent-projects-section">
<h1 class="recent-projects-section-heading">Recent Projects</h1>
<p class="recent-projects-section-body">View our portfolio of some recent projects we have worked on for inspiration and to see our capabilities.</p>
<div class="recent-projects-container">
<div class="recent-project zpanel" >
<h1 class="recent-projects-heading ">Los Angeles</h1>
<p class="recent-projects-body ">Being at the corner of technology and entertainment keeps SitePoint relevant and cutting edge.</p>
</div>
<div class="recent-project fastnfurriest " >
<h1 class="recent-projects-heading ">San Francisco</h1>
<p class="recent-projects-body ">The Hub of Technology and the home of our current and future partners enables us to stay on top of information and innovation.</p>
</div>
<div class="recent-project project-man-gantt " >
<h1 class="recent-projects-heading ">Melbourne</h1>
<p class="recent-projects-body ">Melbourne's growing tech community is where our seasoned developers and designers create the SitePoint magic.</p>
</div>
</div>
</section>
免责声明：城市名称和城市图片可能不匹配，仅供展示！ :)
我使用 CSS 在 Div 上设置了背景图片，如下图所示。
我的问题是我需要图像是 parnet 的全宽 Div 并且图像高度是它的自然全高但是我需要 crop/mask 图像的高度所以它仅在 155px 左右可见。所以即使图片有300px的高度，也只会显示155px。
这是否可能 CSS 或者我是否需要调整实际图像文件的大小？
演示：https://jsfiddle.net/m5dq6akj/1/
<section class="recent-projects-section">
<h1 class="recent-projects-section-heading">Recent Projects</h1>
<p class="recent-projects-section-body">View our portfolio of some recent projects we have worked on for inspiration and to see our capabilities.</p>
<div class="recent-projects-container">
<div class="recent-project zpanel" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2014/05/zpanel-Dashboard-300x206.png);">
<h1 class="recent-projects-heading">Los Angeles</h1>
<p class="recent-projects-body">Being at the corner of technology and entertainment keeps SitePoint relevant and cutting edge.</p>
</div>
<div class="recent-project fastnfurriest" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2014/07/fastnfurriest-com-300x486.png);">
<h1 class="recent-projects-heading">San Francisco</h1>
<p class="recent-projects-body">The Hub of Technology and the home of our current and future partners enables us to stay on top of information and innovation.</p>
</div>
<div class="recent-project project-man-gantt" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2015/03/project-management-module-gantt-300x201.png);">
<h1 class="recent-projects-heading">Melbourne</h1>
<p class="recent-projects-body">Melbourne's growing tech community is where our seasoned developers and designers create the SitePoint magic.</p>
</div>
</div>
</section>
CSS
section.recent-projects-section {
min-height: 770px;
/* background: url(http://apollowebstudio.dev/assets/img/world-map-blue.png) left top no-repeat; */
background: url(http://apollowebstudio.dev/assets/img/world-map-trans.png) left top no-repeat #3BB2D0;
background-size: cover;
}
section.recent-projects-section {
position: relative;
display: block;
text-align: center;
width: 100%;
padding: 0;
color: #424242;
margin-top: -1.3em;
}
.recent-projects-section-heading {
color: #fff;
padding-top: 2.5em;
}
@media only screen and (min-width: 820px) {
section.recent-projects-section>h1 {
width: 60%;
}
}
section.recent-projects-section h1 {
font-size: 1.82em;
font-style: normal;
font-weight: 700;
line-height: 1.16em;
padding-top: 2.5em;
margin-left: auto;
margin-right: auto;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section.recent-projects-section p {
text-align: center;
font-size: 1.1em;
font-weight: 400;
line-height: 1.3em;
color: #777;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section p.recent-projects-section-body {
color: #fff;
width: 50%;
font-size: 1.4em;
margin: 0 auto;
}
.recent-projects-container {
width: 75%;
margin: 0 auto;
padding-top: 4.1em;
padding-bottom: 2em;
}
.recent-project {
position: relative;
display: inline-block;
vertical-align: top;
width: 250px;
min-height: 400px;
border-radius: 10px;
background: #fff left top no-repeat;
padding: 2em 0 0;
margin-top: 2em;
}
section.recent-projects-section h1.recent-projects-heading {
text-align: left;
font-size: 2em;
font-weight: 400;
padding: 5em 0 0 .8em;
line-height: 1.16em;
}
.recent-projects-body {
text-align: left;
font-size: 1.2em;
font-weight: 400;
width: 80%;
margin: 0 auto;
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
@media only screen and (min-width: 621px) {
.recent-project+.recent-project {
margin-left: 1em;
}
}
@media only screen and (min-width: 820px) {
.recent-project+.recent-project {
margin-left: 2em;
}
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
添加 section .recent-projects-section { background-size: 100% } 而不是 background-size: cover
您可以使用从透明（清晰或模糊）到背景颜色到图像 hide/crop 部分的渐变。
裁剪设置为 185 像素的示例 （我让您重置为 155 像素以确保您了解它是如何工作的；）） 或从 165 像素模糊到 205 像素。
/* set your background here for demo and readability */
.zpanel {
background-image:linear-gradient( to bottom , transparent 185px, white 185px), url(http://lorempixel.com/400/200/city/3);
}
/* add even blurr on cropping ? */
.fastnfurriest {
background-image: linear-gradient( to bottom , transparent 165px, white 205px), url(http://lorempixel.com/400/300/city/4);
}
.project-man-gantt {
background-image: linear-gradient( to bottom , transparent 185px, white 185px), url(http://lorempixel.com/400/200/city/5)
}
/* end demo multiple bg */
section.recent-projects-section {
min-height: 770px;
/* background: url(http://apollowebstudio.dev/assets/img/world-map-blue.png) left top no-repeat; */
background: url(http://apollowebstudio.dev/assets/img/world-map-trans.png) left top no-repeat #3BB2D0;
background-size: cover;
}
section.recent-projects-section {
position: relative;
display: block;
text-align: center;
width: 100%;
padding: 0;
color: #424242;
margin-top: -1.3em;
}
.recent-projects-section-heading {
color: #fff;
padding-top: 2.5em;
}
@media only screen and (min-width: 820px) {
section.recent-projects-section>h1 {
width: 60%;
}
}
section.recent-projects-section h1 {
font-size: 1.82em;
font-style: normal;
font-weight: 700;
line-height: 1.16em;
padding-top: 2.5em;
margin-left: auto;
margin-right: auto;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section.recent-projects-section p {
text-align: center;
font-size: 1.1em;
font-weight: 400;
line-height: 1.3em;
color: #777;
font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
}
section p.recent-projects-section-body {
color: #fff;
width: 50%;
font-size: 1.4em;
margin: 0 auto;
}
.recent-projects-container {
width: 75%;
margin: 0 auto;
padding-top: 4.1em;
padding-bottom: 2em;
}
.recent-project {
position: relative;
display: inline-block;
vertical-align: top;
width: 250px;
min-height: 400px;
border-radius: 10px;
padding: 2em 0 0;
margin-top: 2em;
}
section.recent-projects-section h1.recent-projects-heading {
text-align: left;
font-size: 2em;
font-weight: 400;
padding: 5em 0 0 .8em;
line-height: 1.16em;
}
.recent-projects-body {
text-align: left;
font-size: 1.2em;
font-weight: 400;
width: 80%;
margin: 0 auto;
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
@media only screen and (min-width: 621px) {
.recent-project+.recent-project {
margin-left: 1em;
}
}
@media only screen and (min-width: 820px) {
.recent-project+.recent-project {
margin-left: 2em;
}
}
@media only screen and (min-width: 1045px) {
.recent-project {
width: 300px;
}
}
<section class="recent-projects-section">
<h1 class="recent-projects-section-heading">Recent Projects</h1>
<p class="recent-projects-section-body">View our portfolio of some recent projects we have worked on for inspiration and to see our capabilities.</p>
<div class="recent-projects-container">
<div class="recent-project zpanel" >
<h1 class="recent-projects-heading ">Los Angeles</h1>
<p class="recent-projects-body ">Being at the corner of technology and entertainment keeps SitePoint relevant and cutting edge.</p>
</div>
<div class="recent-project fastnfurriest " >
<h1 class="recent-projects-heading ">San Francisco</h1>
<p class="recent-projects-body ">The Hub of Technology and the home of our current and future partners enables us to stay on top of information and innovation.</p>
</div>
<div class="recent-project project-man-gantt " >
<h1 class="recent-projects-heading ">Melbourne</h1>
<p class="recent-projects-body ">Melbourne's growing tech community is where our seasoned developers and designers create the SitePoint magic.</p>
</div>
</div>
</section>
免责声明：城市名称和城市图片可能不匹配，仅供展示！ :)