표지 배경 이미지 + 그라디언트 배경

나는 지금 웹 사이트를 구축 중이며 에 생성 된 모든 섹션과 그라데이션 배경을 포함하도록 배경 이미지이있는 섹션을 설정하려고합니다. 내가 그들을 함께 퍼팅 시도 하지만 정말 작동하지 않았다, 이것은 내가 뭘하려 : https://jsfiddle.net/gmtujnmh/표지 배경 이미지 + 그라디언트 배경

#fullcover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-position: center; 
 
    max-height: 60%; 
 
    display: inline; 
 
    background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); 
 
    /* fallback */ 
 
    background: rgba(62, 21, 49, 1); 
 
    background: -moz-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(62, 21, 49, 1)), color-stop(100%, rgba(162, 23, 128, 1))); 
 
    background: -webkit-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: -o-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: -ms-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: linear-gradient(135deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e1531', endColorstr='#a21780', GradientType=1); 
 
}

<div id="fullcover"></div>

그것이 cssmatic에서 가져온 그라데이션 코드가, 누군가가 나를 도울 수 있습니까?

출처

2016-09-07 ssabin

은 [이] (https://jsfiddle.net/gmtujnmh/1/) 당신이 뭘하려는 건지? – Itay

그래, 그라디언트가 작동하지 않습니다 – ssabin

흠, 그래디언트와 풀 이미지가 필요한 이유는 무엇입니까? 너 oppacity 함께 놀고 싶어? –

피들의 코드가 여기에 게시 한 코드와 일치하지 않습니다.이 대답은 피들의 코드에 대한 것입니다.

https://jsfiddle.net/gmtujnmh/2/

#fullcover{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-position: center; 
    max-height: 60%; 
    display:inline; 

    background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* fallback */ 

background-image: -webkit-gradient(
    linear, left top, left bottom, from(rgba(62,21,49,.6)), 
    to(rgba(162,23,128,.9)), color-stop(.5,#333333) 
), url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* Chrome 10+, Saf5.1+ */

지금 당신은 단지 색상과 불투명도를 함께 플레이해야합니다 당신은 그라데이션에 약간의 투명도를 추가 할 필요가

, 그것은 당신을 위해 여기에 바이올린, 나를 위해 그것을 해결 원하는 것을 얻고, 도움이되기를 바랍니다.

출처

2016-09-07 06:14:12

감사합니다. – ssabin

다른 질문은 내게 알려줄 수 있습니까? 배경 이미지 어디에서 시작할까요? – ssabin

픽셀, 키워드 또는 백분율을 사용하여 background-position 속성을 사용하여 배경 이미지를 이동할 수 있습니다. 이보다 다른 것을 원할 경우 조사를 해보고 유용한 것이 있는지 확인해야합니다. 새로운 질문을 만들 :) –

시도해보십시오.

body{ 
 
     background:url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue); 
 
    height:100%; 
 
    } 
 
    html{height:100%;}


 

 
    <body> 
 
    here we go 
 
    </body>

출처

2016-09-07 06:18:03

표지 배경 이미지 + 그라디언트 배경

답변

관련 문제