ডান দিক থেকে একটি সিএসএস পটভূমি চিত্র x পিক্সেল অবস্থান?

Question

আমি মনে করি উত্তরটি না, তবে আপনি কি সিএসএসের সাথে একটি পটভূমি চিত্র স্থাপন করতে পারেন, যাতে এটি ডান দিক থেকে দূরে পিক্সেলের একটি নির্দিষ্ট পরিমাণের হয়?

যদি আমি background-positionx এবং y এর মান নির্ধারণ করি তবে মনে হয় এগুলি কেবল যথাক্রমে বাম এবং উপরে থেকে নির্দিষ্ট পিক্সেল সামঞ্জস্য দেয়।

Comments

ডান থেকে শুরু করে কীভাবে ব্যাকগ্রাউন্ড-অবস্থানকে একটি নিখুঁত দূরত্বে সেট করতে হবে তার

— সিএওও

: সহায়ক হতে পারে stackoverflow.com/questions/1736922/...

— jedierikb

আপনি এটি CSS3 দিয়ে করতে পারেন - নীচে দেখুন

— ড্রুভিশন

স্ট্যাকওভারফ্লো

— ভলকার ই।

@ জাস্টস এই সম্পাদনাটি কি সত্যিই বাধ্যতামূলক ছিল?

— টমাস আইয়ুব

Answer 1

background-position: right 30px center;

এটি বেশিরভাগ ব্রাউজারে কাজ করে। দেখুন: সম্পূর্ণ তালিকার জন্য http://caniuse.com/#feat=css-background-offsets ।

আরও তথ্য: http://www.w3.org/TR/css3-background/#the-background- অবস্থান

Comments

"আমি জানি না এটি বৈধ কিনা" ... তা না। প্রশ্নযুক্ত সম্পত্তিটির মানগুলির জন্য একটি মানক ক্রম রয়েছে।

— অ্যান্ড্রু বারবার

এটি সিএসএস ব্যাকগ্রাউন্ডস এবং সীমানা 3 অনুসারে বৈধ, যা ইতিমধ্যে প্রার্থী প্রস্তাবনা (বাস্তবায়নের জন্য মানসম্পন্ন প্রস্তুত): w3.org/TR/css3-background/#the-background-position

— ইলিয়া

এটি "সঠিক উত্তর" হিসাবে নির্বাচিত হওয়া উচিত। MDN অনুসারে এটি IE9 + এবং অন্যান্য সমস্ত ব্রাউজারগুলিতে সমর্থিত, যা দুর্দান্ত! বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

নিশ্চিত না কেন এটি উত্তর হিসাবে বেছে নেওয়া হয়নি? এটি ঠিক যা চাওয়া হয় তা করে।

— ক্রিসি

ক্রোম দেব সরঞ্জামগুলিতে এটি চেষ্টা করে দেখছি এবং এটি কাজ করছে বলে মনে হচ্ছে না (সত্যিই ভালভাবে তদন্ত করা হয়নি ...)

— 1nfiniti

Answer 2

borderডান দিক থেকে দৈর্ঘ্য হিসাবে অ্যাট্রিবিউট ব্যবহার করা সম্ভব

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

Comments

এই সমাধানগুলি সাফারিতে দুর্দান্ত কাজ করে তবে ক্রোম, ফায়ারফক্স বা আইই কাজ করে না।

— অ্যান্ডি কুক

আমার জন্য এফএফ কাজ করে। এবং ক্রোম। এবং IE 8 এবং 9. যদিও 7 নয়। দরকারী হ্যাক!

— ndtreviv

আদর্শ নয় যখন আপনার নির্বাচিত বাক্সটি ইতিমধ্যে সীমানা হিসাবে দেখাবে, অন্যথায় বাক্সটির চারপাশে আরও একটি ডিভের প্রয়োজন হবে

— মিগুয়েল

পটভূমি: ইউআরএল ('/ img.png') কোন পুনরাবৃত্তি ডান 10px কেন্দ্র; এটি কাজ করবে, আমি ফায়ারফক্সে পরীক্ষা করেছি

— আসাদ কামরান

Answer 3

একটি উপায় আছে তবে এটি প্রতিটি ব্রাউজারে সমর্থিত নয় ( এখানে কভারেজ দেখুন )

element {
  background-position : calc(100% - 10px) 0;
}

এটি প্রতিটি আধুনিক ব্রাউজারে কাজ করে তবে এটি সম্ভবত99 ক্র্যাশ করে । এছাড়াও = <আই 8 এর জন্য কোনও কভারেজ নেই।

Comments

এটি অনেকগুলি ডিজাইন সমস্যার সত্যই শক্তিশালী সমাধান। চিন্তা - ভাবনা!

— deweydb

সুতরাং এটি সর্বশেষতম ক্রোমেও বাস্তবে কাজ করবে বলে মনে হয় না। আমি যখন উপাদানটি যা বলে তা পরীক্ষা করি যখন background-position-x: calc(90%);- এটি কেবল 100% থেকে 10% কে বিয়োগ করেছে

— সাইমন_উইভার

@ ভ্যালেন্টাইনই যে আমার জন্যও কাজ করে :-) আমি অবশ্যই এটি 90% রূপান্তরিত করতে দেখেছি - এবং আমি ক্রোম থেকে সরাসরি এটি কেটে পেস্ট করেছি had ক্রোমের কোনও দেব-বিল্ডে কোনও অদ্ভুত ত্রুটি না থাকলে আমি কেন তা নিশ্চিত নই

— সাইমন_উইভার

নিবন্ধন করুন আমি এটি বের করেছিলাম। আমি সিএসএসের জন্য কম ব্যবহার করছি এবং এর নিজস্ব 'ক্যালক' ফাংশন রয়েছে যা অগ্রাধিকার নেয়। অন্য কেউ এই সমস্যা হচ্ছে জন্য, দেখুন: stackoverflow.com/questions/17904088/...

— Simon_Weaver

আমি এখানে caniuse.com/#feat=calc দেখতে পাচ্ছি যে এটি আসলে IE9 ক্র্যাশ করতে পারে - তাই আপনি যদি এটির উপর নির্ভর করে থাকেন তবে আপনি অবশ্যই

— IE9-এ

Answer 4

আমি যতদূর জানি, সিএসএসের স্পেসিফিকেশন অবশ্যই সিএসএস এক্সপ্রেশনের বাইরে যা চাইছেন তা সরবরাহ করে না। আপনি এক্সপ্রেশন বা জাভাস্ক্রিপ্ট ব্যবহার করতে চান না এই ধারণাটি বন্ধ করে দিচ্ছি, আমি তিনটি হ্যাকিশ সমাধান দেখতে পাচ্ছি:

• আপনার ব্যাকগ্রাউন্ড চিত্রটি ধারকটির (কমপক্ষে প্রস্থের) আকারের সাথে মেলে কিনা তা নিশ্চিত করুন background-repeat: repeatবা repeat-xপ্রস্থটি যদি সমান হয়। তারপরে xডান দিক থেকে কিছু পিক্সেল উপস্থিত হওয়া যত সহজ background-position: -5px 0px।
• শতাংশের ব্যবহার background-positionবিশেষ আচরণের জন্য এখানে বর্ণিত চেয়ে ভাল দেখা যায়। ইহাকে একটি লাথি দাও. মূলত, background-position: 90% 50%পটভূমির ডান প্রান্ত থেকে 10% দূরে পটভূমির চিত্র লাইনের ডান প্রান্তটি তৈরি করবে।
• ছবিটি ধারণ করে একটি ডিভ তৈরি করুন। position: relativeইতিমধ্যে সেট না থাকলে ধারণকৃত উপাদানটির অবস্থান সুস্পষ্টভাবে সেট করুন । আপনি position: absolute; right: 10px; top: 10px;যথাযথ দেখতে দেখতে চূড়ান্ত দুটি সামঞ্জস্য করার জন্য চিত্র ধারকটিকে এতে সেট করুন । সমন্বিত উপাদানটিতে চিত্র ডিভ ধারক রাখুন।

Comments

টিপস জন্য ধন্যবাদ! হ্যাঁ, আমার এখন এটি ডাব্লু /% মান নির্ধারণ করেছে তবে এটি আমার ক্ষেত্রে এত ভাল কাজ করে না। এই বিজি চিত্রটি যে জায়গাগুলিতে প্রদর্শিত হবে সেগুলি সেই উপাদানগুলিতে রয়েছে যেগুলি আকারে অনেক বেশি পরিবর্তিত হয়, তাই অবশ্যই ডানদিকে অফসেটের পরিমাণটিও ধারাবাহিকতা হত্যার ক্ষেত্রে অনেক পরিবর্তিত হয়। যাইহোক, আমি নিশ্চিত কিছু দৃ hack়তার সাথে যাব, তবে এটি আমার কাছে অদ্ভুত যে এই অনুমানের অংশ নয়। যথেষ্ট সহজ বলে মনে হচ্ছে, আপনি উপর থেকে বা বাম থেকে এটি করতে পারেন, নীচে বা ডানদিকে কেন শুরু করবেন না? যাইহোক, সিএসএস 4-এ যা আমি মারা যাওয়ার সময়ে সমস্ত বড় ব্রাউজারগুলিতে যথাযথভাবে সমর্থিত হবে;)

— ডগ

মনে রাখবেন যে আপনি সিএসএসও ব্যবহার করতে পারেন: নির্বাচক পরে কোনও উপাদানকে অন্য উপাদানটির ডানদিকে ব্যাকগ্রাউন্ড চিত্র যুক্ত করতে পারেন। সেখান থেকে আপনি এটি যেখানে চান সেখানে এটি স্থাপন করতে এটি নেতিবাচক মার্জিন দিতে পারে। আপনি যদি ডানদিকে পুনরাবৃত্তি না করা চিত্রটি যুক্ত করতে চান তবে এটি একটি দুর্দান্ত পরিষ্কার সমাধান।

— নিকো

Answer 5

এটা চেষ্টা কর:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

যদিও লক্ষ্য করুন যে উপরের কোডটি ডান দিক থেকে পুরো উপাদানটি (কেবল পটভূমির চিত্র নয়) 5px স্থানান্তরিত করবে। এটি আপনার ক্ষেত্রে ঠিক হতে পারে।

Answer 6

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

background-position: right 20px bottom 20px;

এটি ফায়ারফক্স, ক্রোম, আই 9 + এ কাজ করে

সূত্র: এমডিএন

Answer 7

ডানদিকে মার্জিন হিসাবে পরিবেশন করতে ডানদিকে স্বচ্ছ পিক্সেল সহ চিত্রটি একত্রিত।

একই চিত্রটির জন্য পিএনজি বা জিআইএফ চিত্র তৈরি করা (স্বচ্ছতা সমর্থন করে এমন চিত্র ফাইল ফর্ম্যাট) যা চিত্রের ডানদিকে একটি স্বচ্ছ অংশ রয়েছে যা আপনি পিক্সেলের সংখ্যার সমান সমান হতে চান ( যেমন: 5px, 10px, ইত্যাদি)

এটি নির্দিষ্ট প্রস্থের পাশাপাশি শতাংশের প্রস্থকেও ধারাবাহিকভাবে কাজ করে। কার্যতঃ হেডারের ডানদিকে একটি প্লাস / বিয়োগ বা উপরে / ডাউন তীর চিত্রযুক্ত অ্যাকর্ডিয়ান শিরোনামগুলির জন্য একটি ভাল সমাধান!

ডাউনসাইড: দুর্ভাগ্যক্রমে, আপনি জেপিজি ব্যবহার করতে পারবেন না যদি না আপনি ধারকটির ব্যাকগ্রাউন্ড অংশ এবং সিএসএস ব্যাকগ্রাউন্ড ইমেজের ব্যাকগ্রাউন্ড কালার একই ফ্ল্যাট রঙের (গ্রেডিয়েন্ট / ভিগনেট সহ) বেশিরভাগ সাদা / কালো ইত্যাদি না করেন you

Comments

আমার জন্য এটিই একমাত্র সমাধান যা সমস্ত ব্রাউজারে কাজ করেছিল।

— ম্যাথিউ নাপোলি

Answer 8

আধুনিক ব্রাউজারগুলির এই দিনে যদি আপনি এই বিষয়টিতে হোঁচট খাওয়ার ঘটনা ঘটেন তবে আপনি ছদ্ম-শ্রেণি ব্যবহার করতে পারেন: ব্যাকগ্রাউন্ডের সাথে ব্যবহারিক কিছু করার পরে।

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

এই সিএসএস ডান পাশে 20px স্থান সহ "। কনটেনার" উপাদানটির নীচে ডান কোণায় ব্যাকগ্রাউন্ড রাখবে।

উদাহরণস্বরূপ এই জালটি দেখুন http://jsfiddle.net/h6K9z/226/

Comments

আপনি কোথায় যাচ্ছেন তা আমি পছন্দ করি তবে এটি: পরে ক্লাসের চেয়ে প্রকৃত উপাদানগুলির চেয়ে বেশি। কেবল স্পষ্টকরণের উদ্দেশ্যে

— vmex151

ডান তবে <আই 8

— মিগুয়েল

@ মিগুয়েল সেখানে আর কাজ করার দরকার নেই ;-) যারা এখনও IE 8 এর চেয়ে পুরানো সংস্করণ ব্যবহার করেন তাদের জন্য নকশাকে যতটা সম্ভব কুৎসিত দেখা যাক! (.. যতক্ষণ পর্যন্ত ওয়েবসাইটটি এখনও অ্যাক্সেসযোগ্য ..)

— জেমস কাজজিটা

Answer 9

সবচেয়ে উপযুক্ত উত্তর পশ্চাদপট-পদের জন্য নতুন চার মান সিনট্যাক্স, কিন্তু পর্যন্ত ব্রাউজার এটিকে সমর্থন করে আপনার সেরা পদ্ধতির নিম্নলিখিত জন্য আগেই প্রতিক্রিয়া সংমিশ্রণ:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Comments

-ওয়েবেকিট-ক্যালক শূন্য অনুশোচনা সহ আমার সাফারিটিকে ক্র্যাশ করে। ওএসএক্স 10.8.5 / সাফারি

— 6.0.5

Answer 10

চিত্রটিতে কেবল পিক্সেল প্যাডিং রাখুন - ফটোহপে চিত্রের ক্যানভাস আকারে 10px বা যা কিছু যুক্ত করুন এবং সিএসএসে ডানদিকে সরান।

Answer 11

আমি সর্বদা টেবিল শিরোনামের ডানদিকে ড্রপডাউন তীর পেতে একইরকম কাজ করার চেষ্টা করছিলাম এবং এটি নিয়ে এসেছি যা ক্রোম এবং ফায়ারফক্সে কাজ করে বলে মনে হচ্ছে, তবে সাফারি আমাকে বলছিল এটি একটি অবৈধ সম্পত্তি।

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

পরিদর্শককে কিছুটা গোলমাল করার পরে, আমি এই ক্রস-ব্রাউজার সমাধানটি নিয়ে এসেছি যা আইই 8 +, ক্রোম, ফায়ারফক্স এবং সাফারি, পাশাপাশি প্রতিক্রিয়াশীল ডিজাইনে কাজ করে।

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

এটি কীভাবে দেখায় এবং কীভাবে কাজ করে তার একটি কোড কোড রয়েছে। কোডেপেন লিখেছেন এসসিএসএস - http://cdpn.io/xqGbk

Comments

আমি আপনাকে মনে করিয়ে দিচ্ছি যে সেটিংস% এর ফলে এটি ধারকটির দৈর্ঘ্যের উপর নির্ভর করে প্রান্তিককরণ করবে, যা আপনার কাছে বড় পাত্রে থাকলে অগোছালো হতে পারে

— মিগুয়েল

Answer 12

আপনি যদি কেবল এক্স-অক্ষটি নির্দিষ্ট করতে চান তবে আপনি নিম্নলিখিতটি করতে পারেন:

background-position-x: right 100px;

Comments

এটি ক্রোমে 81.0.4044.138 এ কাজ করছে না। এটি অবৈধ সম্পত্তি মান বলছে।

— Xandor

আমি এটি দিয়ে কাজ করতে সক্ষম হয়েছি: background-position: right -100px center;নোট করুন যে আপনি যদি y-positionএটি বাদ দেন তবে এটি সঠিকভাবে কাজ করে না কারণ এটি মনে করে যে পিক্সেলগুলি কিসের জন্য।

— Xandor

Answer 13

আমি যে সমাধানটি উল্লেখ না করেছিলাম তা ছদ্ম উপাদানগুলি ব্যবহার করা এবং আমি বিশ্বাস করি যে এই সমাধানটি কোনও সিএসএস ২.১ অনুবর্তী ব্রাউজারের সাথে কাজ করবে (≥ আইই ৮, ≥ সাফারি ২, ...) এবং এটি প্রতিক্রিয়াশীলও হওয়া উচিত:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

উদাহরণ : উপাদান যেমন। একটি বর্গাকার আকারের 100px (সীমানাগুলি বিবেচনা না করে) একটি 10px প্যাডিং রয়েছে এবং ডান প্যাডিংয়ের অভ্যন্তরে একটি পটভূমি চিত্রটি দেখানো উচিত। এর অর্থ ছদ্ম-উপাদানটি একটি 80px আকারের বর্গ। আমরা এটিকে উপাদানটির ডান সীমানার সাথে ডানদিকে আটকে রাখতে চাই : -10px; । আমরা যদি ডান সীমানা থেকে পটভূমি-চিত্রটি 5px দূরে রাখতে চাই, তবে সিউডো-এলিমেন্ট 5px ডান সহ উপাদানটির ডান সীমানা থেকে দূরে রাখতে হবে: -5px; ... এটি নিজের জন্য এখানে এটি পরীক্ষা করুন: http://jsfiddle.net/yHucT/

Answer 14

যদি ধারকটির একটি নির্দিষ্ট উচ্চতা থাকে: সঠিকভাবে ফিট না হওয়া অবধি শতাংশ (পটভূমির অবস্থান) টুইঙ্ক করুন।

যদি ধারকটির গতিশীল উচ্চতা থাকে: আপনি যদি আপনার পটভূমি এবং আপনার ধারক (যেমন কাস্টম স্টাইলিং ইনপুট নির্বাচন করেন) এর মধ্যে কোনও প্যাডিং চান তবে আপনার প্যাডিংটি আপনার চিত্রটিতে যুক্ত করুন এবং পটভূমির অবস্থানটি ডান বা নীচে সেট করুন।

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

আশাকরি এটা সাহায্য করবে!

Answer 15

আপনি ডান দিক থেকে এক্স পিক্সেল হিসাবে আপনার পটভূমি চিত্রটি সম্পাদককে অবস্থান করতে পারেন।

background: url(images_url) no-repeat right top;

পটভূমি চিত্র উপরে ডানদিকে অবস্থিত হবে, তবে ডান থেকে এক্স পিক্সেল হিসাবে প্রদর্শিত হবে।

Comments

এটি পিছনের দিকে পেয়েছে .. এর অনুভূমিক তারপর উল্লম্ব

— রায় 20

Answer 16

বাম দিক থেকে শতকরা টুইটগুলি আমার পছন্দ অনুসারে কিছুটা ভঙ্গুর। যখন আমার এর মতো কিছু দরকার হয় তখন আমি আমার পাত্রে স্টাইলিংটি একটি মোড়কের উপাদানটিতে যুক্ত করতে পারি এবং তারপরে অভ্যন্তরীণ উপাদানটির সাথে পটভূমিটি প্রয়োগ করেbackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

.content-breakoutবর্গ ঐচ্ছিক এবং আপনার বিষয়বস্তু প্যাডিং মধ্যে খেতে প্রয়োজনে (ঋণাত্মক মার্জিন মান মোড়কের প্যাডিং সংশ্লিষ্ট মান মেলে উচিত) অনুমতি দেবে। এটি সামান্য ভার্বোস, তবে চিত্রটির প্রস্থ এবং উচ্চতার তুলনায় চিত্রটির আপেক্ষিক অবস্থান সম্পর্কে উদ্বিগ্ন না হয়ে নির্ভরযোগ্যভাবে কাজ করে।

Answer 17

এই প্রশ্নটি জিজ্ঞাসা করার পরে এটি দীর্ঘ হয়ে গেছে, তবে আমি কেবল এই সমস্যার মধ্যে পড়েছিলাম এবং এটি করে আমি পেয়েছি:

background-position:95% 50%;

Comments

ডান দিক থেকে আপনার সঠিক পিক্সেল প্রয়োজন না হলেও আরও তরল বিন্যাসের প্রয়োজন না হওয়ায় এটি আমার জন্য বেশ সুন্দরভাবে কাজ করেছে।

— জেফ এস

Answer 18

নেতিবাচক মানগুলির সমাধান। চিত্রটি সরানোর জন্য প্যাডিং-ডান সামঞ্জস্য করুন।

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Answer 19

এটি ক্রোম ২ 27 এ কাজ করে, আমি জানি না এটি বৈধ কিনা এবং অন্য ব্রাউজার্সগুলি এটি দিয়ে কী করে। আমি এই সম্পর্কে অবাক হয়েছিল।

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Comments

এটি বৈধ নয়, ক্রোমটি আপনার কাছে খুব সুন্দর ছিল।

— রোজআ

Answer 20

সমস্ত বাস্তব ব্রাউজারের জন্য কাজ করে (এবং আই 9 + এর জন্য):

background-position: right 10px top 10px;

আমি এটি আরটিএল ওয়ার্ডপ্রেস থিমগুলিতে ব্যবহার করি। উদাহরণ দেখুন: অস্থায়ী ওয়েবসাইট বা বাস্তব ওয়েবসাইট শীঘ্রই আপ হবে। বড় ডিআইভি ডান কোণে আইকনগুলি দেখুন।

Answer 21

সমস্ত পটভূমির জন্য আরও ভাল: ইউআরএল ('.. / চিত্র / বিজি-মেনু-ড্রপডাউন-টপ.পিএনজি') 20px শীর্ষের নো-রিপিট! গুরুত্বপূর্ণ;