শর্টহ্যান্ড পটভূমি সম্পত্তি (CSS3) এর পটভূমি আকার

Question

আমি একটি সংক্ষিপ্ত সম্পত্তি মধ্যে মিশ্রণ background-imageএবং background-sizeবৈশিষ্ট্য চেষ্টা করছি background। ডাব্লু 3 সি ডকুমেন্টেশনের উপর ভিত্তি করে স্ল্যাশ ( ) দিয়ে সম্পত্তি পৃথক করার background-sizeপরে আসা উচিত ।background-position/

ডাব্লু 3 সি উদাহরণ:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

সমান:

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

এমডিএন একই কথা বলে। আমিও পাওয়া এই এবং এই সম্পর্কে সংক্ষেপে সিএসএস 3 পটভূমি সম্পত্তি এই ব্যাখ্যা নিবন্ধ।

কিন্তু এই কাজ করছে না! এছাড়া কিভাবে সাধারণভাবে সংক্ষেপে করতে স্পষ্ট নয় backgroundসম্পত্তি যখন background-sizeএবং background-positionজন্য দুটি ভিন্ন মান background-position-xএবং background-position-yবা একই জিনিস background-size। এটি স্পষ্ট নয় যে স্ল্যাশ ( /) কীভাবে ঘটে? এই উদাহরণটি আমার ক্রোম 15 এ কাজ করছে না।

আমি শর্টহ্যান্ড তৈরি করার যে উদাহরণটি চেষ্টা করেছি তা হ'ল এই সিএসএস কোড:

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

একটি পরিষ্কার উদাহরণ

এটি কাজ করছে ( জেএসফিডাল )

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

এটি কাজ করছে না ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

এটি খুব বেশি কাজ করছে না ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

Comments

সাফারি সতর্ক থাকুন যা ব্যাকগ্রাউন্ড-আকারের শর্টহ্যান্ডকে সমর্থন করে না! সাফারি এটি সমর্থন করে না! সাফারিটিকে দমবন্ধ করা থেকে বিরত রাখতে আপনার ব্যাকগ্রাউন্ডের আকারটি আপনার ব্যাকগ্রাউন্ড থেকে আলাদা করুন!

— জেফ

Answer 1

1. আপনার jsfiddle এর background-imageপরিবর্তে ব্যবহার করেbackground
2. এটি "এখনও এই ব্রাউজার দ্বারা সমর্থিত নয়" এর একটি মামলা বলে মনে হচ্ছে।

এটি অপেরাতে কাজ করে: http://jsfiddle.net/ZNsbU/5/
তবে এটি এফএফ 5 বা আইই 8 তে কাজ করে না। (পুরানো ব্রাউজারগুলির জন্য ইয়ে: ডি)

কোড:

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

আপনি এটি এর মতো করতে পারেন:

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

যা এফএফ 5 এবং অপেরাতে কাজ করে তবে আইই 8 তে নয়।

Comments

আপনি কি মনে করেন এটি ব্রাউজার সমর্থন সমস্যা নয়?

— ক্রাজ

আমি শুধু ভাবছি যে CSS3 এর সঠিক স্পেসিফিকেশনটি backgroundকী?

— মহেসেন

আপনার প্রশ্ন বা আমার কোড উদাহরণে ঠিক যেমন ডাব্লু 3 সি সংজ্ঞায়িত হয়েছে এটি। এটি কেবলমাত্র সমস্ত ব্রাউজারে প্রয়োগ করা হয়নি।

— ক্রেজ

এটি ক্রোম ক্যানারিটিতে কাজ করছে না। আমি বিশ্বাস করতে পারি না এটি এখনও কার্যকর হয়নি।

— মহেসেন

এই অংশটির উত্তর হিসাবে নির্বাচিত: এটি "এখনও এই ব্রাউজার দ্বারা সমর্থিত নয়" কেস বলে মনে হচ্ছে।

— মোহসেন 21

Answer 2

আপনি হিসাবে করতে পারেন

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

Comments

এটিই আমাকে সবচেয়ে বেশি সাহায্য করেছিল; আমি জানতাম না যে আপনি ব্যাকগ্রাউন্ড আকারের ঘোষণাগুলি একটি কমা দিয়ে বিভক্ত করতে পারবেন, তার উপরে প্রতিটি url এর জন্য একটি।

— নাথানিয়েল ফ্লিক

Answer 3

রেফারেন্সের জন্য কেবল একটি নোট: আমি শর্টহ্যান্ডটি এর মতো করার চেষ্টা করছিলাম:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

তবে আইফোন সাফারি ব্রাউজারগুলি স্থির অবস্থানের উপাদানটি সহ চিত্রটি সঠিকভাবে প্রদর্শন করছে না। আমি কোনও অ-স্থির সাথে পরীক্ষা করিনি, কারণ আমি অলস। ব্যাকগ্রাউন্ড প্রোপার্টি পরে ব্যাকগ্রাউন্ড-আকার রাখার বিষয়ে সতর্ক হয়ে আমাকে নীচের থেকে সিএসএস স্যুইচ করতে হয়েছিল । যদি আপনি এগুলি বিপরীতে করেন তবে পটভূমিটি ব্যাকগ্রাউন্ড-আকারটিকে চিত্রের মূল আকারে ফিরিয়ে দেয়। সুতরাং সাধারণত আমি পটভূমি-আকার সেট করতে শর্টহ্যান্ড ব্যবহার করা এড়াতে চাই।

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

Comments

অ্যান্ড্রয়েড 4.1.2 স্টক ব্রাউজারে এখানে একই

— ডিপোলো

Answer 4

এই মত চেষ্টা করুন

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

Answer 5

বিভিন্ন ব্রাউজার সমর্থন করতে আপনাকে বিক্রেতার উপসর্গ ব্যবহার করতে হবে এবং তাই এটি শর্টহ্যান্ডে ব্যবহার করতে পারবেন না।

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Comments

এটি সঠিক নয়। আমি পুরানো ব্রাউজারগুলি সমর্থন না করতে চাইলে আমাকে বিক্রেতা উপসর্গ ব্যবহার করতে হবে না

— মহসেন

এই বিক্রেতা উপসর্গগুলি এখনও কাজ করে এবং কিছু ব্রাউজার কেবল সম্প্রতি এটিকে ফেলে দিয়েছে।

— জামান