Ondersteuning » Thema en CSS/opmaak » is he mogelijk border met background wit een deel van image gebruiken als wit ?

  • Opgelost johannes999

    (@johannes999)


    Hallo,
    ik wil weten is het mogelijk om border te maken van width: 92% and height :200px met background helemaal wit (om tekst in te voegen) . dus helemaal wit met cSS tricks.
    de border moet top margin – 3rem hebben om gedeeltelijk in header image te zijn.
    ik denk om deze waar te maken ik moet voor de lijnen box shadow gebruiken.
    ik heb een border gemaakt maar de gedeelde in de image wordt niet overgenomen door de witte kleur in de border!
    is deze probleem mogelijk met CSS tricks oplossen of ik moet photoshop gebruiken?
    dank u wel

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Photoshop.

    Thread starter johannes999

    (@johannes999)

    dank u wel

    Thread starter johannes999

    (@johannes999)

    na 2 dagen zoeken ik heb gevonden de antwoord.
    de border met witte(of andere kleur) background die geedeltelijk in image zijn moet in het zelfde div class zijn van de image.
    het kan niet buiten de div class zijn van de image anders het lukt niet.
    ook gebruiken van flexbox veroorzakt problemen.
    ik heb percentages gebruikt in plaats van flex.
    deze is mij html code:

    <div class="site-header">        <!-- site-header --> 
    	
    			<div class="site-title ">		  
    	X Auto Service</div> 
         
    
    	  <div class="header-menu">					
    			<ul>				
    				<li><a href="http://webdesignleren.com/" > Home </a> </li>
    				<li><a href="http://webdesignleren.com/onderhoud/" > Onderhoud </a> </li>
    				<li><a href="http://webdesignleren.com/banden/" > Banden </a> </li>
    				<li><a href="http://webdesignleren.com/apk/" > APK </a> </li>
    				<li><a href="http://webdesignleren.com/contact/" > Contact </a> </li>	
    						
    				
    		  </ul>  </div> 
    		 
    			
    		
    		
    		<message>
    	<h1>  <span>FULL</span>   <span>SERVICE</span>   <span>OF</span>  <span>AUTO</span>   <span>REPAIR</span>
      <span>And</span>  <span>Maintenance</span>  <span>PROFESSIONAL</span> <span>HELP</span>   <span>AND</span>
      <span>DURABLE</span>  <span>REPAIR</span>  <span>SERVICE</span>  <span>place</span>  <span>on</span>   <span>your</span>   <span>own</span>   <span>thinking.</span>
    </h1>
    	
    			</message>     		
    		
    		<div class="box">   <div class="box-item1"> hello 	</div>  
    			<div class="box-item2">  hello   </div>     <div class="box-item3">  hello   </div>  
    		</div>                              
    	
    	</div>

    en deze is mij CSS code:

    .box {
    display:flex;
    width:92%;
    float:left;	
    margin-left:4%;
    border:0.1 solid;
    box-shadow: 0px 0px 2px 2px #C8C8C8;  
    box-sizing:inherit;
    	/*-moz-box-sizing: border-box; 	*/
    background-color:red; 
    
    height:200px;
    margin-top:26rem;	
    }
    .box-item1{
    
    color:black
    	
    }
    
    .box-item2{
    justify-content:center;
    color:black	
    }
    
    .box-item3{
    	color:black;
    	justify-content:flex-end;
    	
    	
    }

    dank u wel

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)