How can you make a smooth transition of the background from color to transparent, if the content can be more, and the background should smoothly move somewhere around 20% from the top (from transparent)?

It should be like this:

enter image description here

I try to make a gradient, but the transition is rough, if you set 50%, then the transition is too blurry.

.wrap { background: url(http://www.gettyimages.com.au/landing/assets/static_content/home/info-tabs3.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 50%; } p { color: #fff; padding: 2rem; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(12,12,13,0.6) 20%, rgba(51,51,54,1) 100%); } 
 <div class="wrap"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, numquam qui reiciendis aperiam, nam amet? Dolore porro recusandae deserunt pariatur eum, facilis vitae. Optio ea cupiditate iure deleniti adipisci minus. </p> </div>

box-shadow: inset 0 80% 50% #000; - It would be perfect, but you can't ask in%.

  • Judging by the image, you need to make a wrap gradient, not p . You should have a gradient mask on top of your image. - Ares

3 answers 3

With shadow:

 .wrap { background: url(http://www.gettyimages.com.au/landing/assets/static_content/home/info-tabs3.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 50%; overflow: hidden; } p { padding: 2rem; position: relative; color:#fff; /* background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(12,12,13,0.6) 24%, rgba(51,51,54,1) 100%); */ } span { position: relative; z-index: 2; } p:after { content: ''; position: absolute; left: 0; right: 0; top: 100px; bottom: 0; background: #000; } p:before { content: ''; position: absolute; left: -100px; right: -100px; top: 0; height: 100px; box-shadow: inset 0px -50px 50px #000; } 
 <div class="wrap"> <p> <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, numquam qui reiciendis aperiam, nam amet? Dolore porro recusandae deserunt pariatur eum, facilis vitae. Optio ea cupiditate iure deleniti adipisci minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quis. </span> </p> </div>

    Are you not satisfied with image masking?

    The mask property combines a mask image and a mask reference.

    The first way is to use the mask-image , mask-repeat , mask-position , mask-clip , mask-origin and mask-size properties, which are defined like background parts like background-image . As with background-image you can define several mask source codes, each of them is an image described in CSS3 Images. All mask sources will be combined into a single mask image, then it is used to mask the element and its contents, as described above. The image can be in any raster format like JPG or PNG, as well as SVG or CSS gradient. The mask example above can be simply implemented with the following code:

     img { mask-image: url(mask.svg); }

    If the source of the mask should be stretched to the size of the content, then simply use the universal mask property for the background, as if you are dealing with the background property.

     img { mask: url(mask.svg) top left / cover; }

    The second way is to reference the element, which is described in SVG 1.1. The element takes any graphic element, as well as a group of elements from the SVG and uses them to create the mask image.

    CSS:

     img { mask: url(#masking); }

    HTML:

     <svg> <defs> <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%"> <stop stop-color="black" offset="0"/> <stop stop-color="white" offset="1"/> </linearGradient> <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <rect y="0.3" width="1" height=".7" fill="url(#gradient)" /> <circle cx=".5" cy=".5" r=".35" fill="white" /> </mask> </defs> </svg> <img src="image.jpg" width="568">

    Here in more detail:

    http://htmlbook.ru/blog/maskirovanie-v-css

    http://css.yoksel.ru/css-and-svg-masks/

    Those. You will form the mask you want to apply. Given that you can use svg in which the mask can be specified through percentages.

    PS

    The disadvantage is that IE and Edge support will have to be donated.

    • svg, not supported in IE and Edge ???? - Air
    • Air, as I understood mask-image and others like it, is not supported by IE and Edge caniuse.com/#search=mask-image
    • Although the link can find the answer to the question, it is better to point out the most important thing here, and give the link as a source. If the page to which the link leads will be changed, the response link may become invalid. - From the queue of checks - aleksandr barakin
    • @alexander barakin, added description - Zhihar
    • you see, detailed answers, lead not only to the abolition of the minus, but also received a plus ...)))) - Air

    And you will set up the gradient yourself, as you like.

     html, body { width: 100%; height: 100%; } .wrap { position: relative; background: url(http://www.gettyimages.com.au/landing/assets/static_content/home/info-tabs3.jpg); background-size: cover; width: 100%; height: 100%; } .gar { z-index: 111; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); background: linear-gradient(0, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 0) 60%); } p { position: absolute; z-index: 112; color: #fff; bottom: 0; padding: 2rem; } 
     <div class="wrap"> <div class="gar"> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, numquam qui reiciendis aperiam, nam amet? Dolore porro recusandae deserunt pariatur eum, facilis vitae. Optio ea cupiditate iure deleniti adipisci minus. </p> </div>

    • This is sooooo far from what is needed and the fact of the matter is that I can not adjust the gradient. - hug
    • @hug colorzilla.com/gradient-editor - Crantisz
    • @hug, I didn’t make an example of what it would be exactly as you want .. I can’t know this, it’s an example of how to do what you need ... and then yourself ... well, work with a gradient ... get what you want ... - Air