0
votes

Comment ajouter un remplissage supérieur à une image d'arrière-plan dans CSS?

J'ai essayé d'ajouter un sommet de remplissage avec de nombreuses valeurs de pixels dans le style, mais le rembourrage de l'image par rapport à la page Web refuse de changer. IE RADING-TOP: 5PX; .. Un extrait de mon code est donné ci-dessous: -

<div class="row pb-5 mt-4" style="background-color: rgba(3, 31, 45, 0.5);">
          style="background-image: url('images/image1.jpg'); 
          background-repeat: no-repeat; background-position: center; background-size: cover; 
          position: relative; border-radius: 10px 0 0 10px; padding-top: 5px;">
</div>

html css bootstrap-4

1 commentaires

Vous avez des fautes de frappe dans votre balisage, que je suis sûr que ce n'est pas liée à la question. S'il vous plaît corriger si oui. Vous avez une fermeture '>' à la fin de la première ligne et un attribut «style» en double.

4 Réponses :

1
votes

Le rembourrage ne sera appliqué qu'à l'élément auquel vous ajoutez l'arrière-plan, mais pas à l'image d'arrière-plan elle-même. Il semble que ce que vous voulez jouer est position de fond .

Vous avez actuellement arrière-plan-position: centre;

Essayez de changer cela vers Coly-position: Centre 20px;

Voir: https://www.w3schools.com/cssref/pr_background-Position .asp pour plus d'exemples



                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Grand merci! Travaillé comme un charme :) Bien que le seul problème est de supprimer les rayons frontaliers que j'avais ajoutés.                                                
                                                
                                                                                            
                                                    Veuillez fournir une capture d'écran ou un lien à l'exemple reproductible minimum afin de mieux comprendre le résultat final souhaité.


                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous pouvez simplement le faire en ajoutant un attribut de style:  xxx                                  

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Merci, cela a fonctionné mais il enleva les radiateurs frontières que j'avais ajoutés. Quel pourrait être le problème?                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous pouvez essayer ce  xxx                                  

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Dans ce cas, la solution est la position  arrière-plan  code> comme les autres mentionnées. 
  Border-rayon  code> Le problème est normal. Veuillez vérifier le code ci-dessous pour comprendre. Pensez que votre div est un rectangle et vous avez votre image de fond dessus. Lorsque vous jouez avec  arrière-plan-position  code>, vous déplacez l'image mais pas la DIV elle-même. Donc, la propriété Radius reste à sa place et ne change pas.  P> 
  p> 


<div class="outer">
  <div class="inner-with-bg">          
  </div>
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires